Interactions prevent focus movement

[stokes_dk]

This bug occurs when you render an autocomplete input inside a dialog. When the autocomplete popup is showing and you move the dialog box or resize it, the popup does not move with it. Also, if you close the dialog box the popup remains visible. The following source can be used to reproduce the problem:

	<script>
	$(function() {
		$( "#dialog" ).dialog();
	});
	$(function() {
		var availableTags = ["A", "B", "C" ];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>

<div class="demo">

	<div id="dialog" title="Basic dialog">
		<p>Enter the letter A to launch autocomplete suggestion popup then move, resize or close with the 'x' icon.</p>
		<div class="ui-widget">
			<label for="tags">Tags: </label>
			<input id="tags" />
		</div>
	</div>

</div><!-- End demo -->

[Scott González]

I can confirm that this happens when dealing with interaction plugins (dragging, resizing), but not when closing the dialog.

[Scott González]

Adding document.activeElement.blur() at the end of _mouseDown() in jquery.ui.mouse.js fixes this problem, but may cause other problems. However, this may be expected behavior (blurring the last active element). I tried event.target.focus() but that didn't do anything.

[Jörn Zaefferer]

Does mouse ever rely on elements having focus?

[TrevorBurnham]

The ideal behavior would be for the autocomplete dialog to move along with the input, rather than disappearing, wouldn't it be? I've submitted a patch at ​https://github.com/jquery/jquery-ui/pull/272

[Scott González]

No, why would it be ideal for a widget you're no longer interacting with to stay active? You've clearly changed your attention from using the autocomplete widget to moving the dialog.

[jkupko]

For a temporary fix, in the dialog you can use the "dragStart" event to trigger blur events on any inputs:

var that = this;
$("#formID").dialog({   
    dragStart: function(){
        $(that).find("input").trigger("blur");
    }
});

The autocompletes should close if their inputs lose focus. This remains a bit hackish, and it is still not the expected behavior - would be nice to blur on mouse down instead.

[Scott González]

#9333 is a duplicate of this ticket.

[Scott González]

#7961 is a duplicate of this ticket.

[Scott González]

#9985 is a duplicate of this ticket.

[tj.vantoll]

This appears to have been fixed in 1.9. Here's the issue in 1.8.24: ​http://jsfiddle.net/tj_vantoll/NXVLM/. You can update jQuery UI to 1.9 to see the issue go away. Here's the same code running against master; it also works fine: ​http://jsfiddle.net/tj_vantoll/NXVLM/1/

[Scott González]

The specific case of autocomplete inside a dialog may be fixed, but the underlying issue still exists. I've changed the title of the ticket to better reflect the real issue. See ​http://jsbin.com/tadibodi/1/edit which is from #9985 to see an example of what's wrong (the input stays focused even though you've interacted with the draggable element).

[Scott González]

I've changed my mind about how this should work. Interactions should not change focus. However, any widget that has a contextual open state (such as autocomplete showing the menu, datepicker showing the calendar, etc.) should listen for actions outside of the widget and revert back to the closed state.

Related to #10082 and #8223.

[Scott González]

Closing as fixed in 1.9.0. The tickets for the individual widgets are still open.

[Scott González]

Autocomplete: Close the menu on any outside interactions

This ensures that the menu will close if the user interacts with a draggable, resizable, etc. element since those interactions don't change focus.

Ref #6642 Closes gh-1614

Changeset: 548fbf570caa5fdee973bbbe8ac2d36b0338c2b9