#6642 closed bug (fixed)

Opened November 09, 2010 04:24PM UTC

Closed October 15, 2015 02:18PM UTC

Last modified October 16, 2015 06:09PM UTC

Interactions prevent focus movement

Reported by: stokes_dk Owned by:
Priority: major Milestone: 1.9.0
Component: ui.mouse Version: 1.8.6
Keywords: Cc:
Blocked by: Blocking:
Description

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 -->
Attachments (0)
Change History (19)

Changed November 09, 2010 07:05PM UTC by scottgonzalez comment:1

component: ui.core → ui.mouse

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

Changed November 09, 2010 07:13PM UTC by scottgonzalez comment:2

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.

Changed November 10, 2010 11:41AM UTC by jzaefferer comment:3

Does mouse ever rely on elements having focus?

Changed November 10, 2010 11:42AM UTC by jzaefferer comment:4

status: new → open

Changed May 13, 2011 10:47PM UTC by TrevorBurnham comment:5

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

Changed May 16, 2011 12:46PM UTC by scottgonzalez comment:6

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.

Changed May 16, 2011 12:46PM UTC by scottgonzalez comment:7

milestone: TBD → 1.9

Changed March 15, 2012 05:01PM UTC by jkupko comment:8

_comment0: 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.form).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. → 1331830914268979

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.

Changed March 15, 2012 05:06PM UTC by scottgonzalez comment:9

summary: Auotocmplete can not be used inside a dialog → Autocomplete does not close properly inside a draggable dialog.

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:10

milestone: 1.9.0 → 2.0.0

Changed May 28, 2013 01:28PM UTC by scottgonzalez comment:11

#9333 is a duplicate of this ticket.

Changed February 26, 2014 02:53PM UTC by scottgonzalez comment:12

#7961 is a duplicate of this ticket.

Changed April 16, 2014 04:36PM UTC by scottgonzalez comment:13

#9985 is a duplicate of this ticket.

Changed May 01, 2014 12:55PM UTC by tj.vantoll comment:14

milestone: 2.0.0 → 1.9.0
resolution: → fixed
status: open → closed

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/

Changed May 07, 2014 04:25PM UTC by scottgonzalez comment:15

keywords: autocomplete dialog
milestone: 1.9.0 → none
resolution: fixed
status: closed → reopened
summary: Autocomplete does not close properly inside a draggable dialog. → Interactions prevent focus movement

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).

Changed May 07, 2014 04:31PM UTC by scottgonzalez comment:16

status: reopened → open

Changed October 13, 2015 06:35PM UTC by scottgonzalez comment:17

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.

Changed October 15, 2015 02:18PM UTC by scottgonzalez comment:18

milestone: none → 1.9.0
resolution: → fixed
status: open → closed

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

Changed October 16, 2015 06:09PM UTC by Scott González comment:19

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