Input blur inside selectable element

Question

I have an input element inside a Jquery-UI selectable element. And I want to fire the blur event when clicking outside the input, but it's not possible, because of the container, the selectable element stops propagating the mousedown.

Example here.

How can I fire the blur event?

Answer 1

I come across these problems a lot while working on complex UI stuff, here give this a try:

http://jsfiddle.net/LNtqE/5/

What the code is doing is registering a psuedo-blur event to the document that will only fire once, then unbind itself. The event will only fire if the target is NOT the input that registered it... this could work for all inputs, or specific ones depending on what you feed to the selector :)

$(document).ready(function(){

    $('#selectable').selectable({});

    $("input").on("focus", function(e) {

        var $input = $(this);

        $(document).on("mouseup", function(e2) {

            if( !$(e2.target).is( $input )) {

                $input.trigger("blur");
                $(this).off(e2);

            }

        });

    });

});