Opened 7 years ago

Closed 20 months ago

Last modified 20 months ago

#6642 closed bug (fixed)

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

Change History (19)

comment:1 Changed 7 years ago by Scott González

Component: ui.coreui.mouse

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

comment:2 Changed 7 years ago by 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.

comment:3 Changed 7 years ago by Jörn Zaefferer

Does mouse ever rely on elements having focus?

comment:4 Changed 7 years ago by Jörn Zaefferer

Status: newopen

comment:5 Changed 6 years ago by 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

comment:6 Changed 6 years ago by 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.

comment:7 Changed 6 years ago by Scott González

Milestone: TBD1.9

comment:8 Changed 5 years ago by 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.

Last edited 5 years ago by jkupko (previous) (diff)

comment:9 Changed 5 years ago by Scott González

Summary: Auotocmplete can not be used inside a dialogAutocomplete does not close properly inside a draggable dialog.

comment:10 Changed 5 years ago by Scott González

Milestone: 1.9.02.0.0

comment:11 Changed 4 years ago by Scott González

#9333 is a duplicate of this ticket.

comment:12 Changed 3 years ago by Scott González

#7961 is a duplicate of this ticket.

comment:13 Changed 3 years ago by Scott González

#9985 is a duplicate of this ticket.

comment:14 Changed 3 years ago by tj.vantoll

Milestone: 2.0.01.9.0
Resolution: fixed
Status: openclosed

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/

comment:15 Changed 3 years ago by Scott González

Keywords: autocomplete dialog removed
Milestone: 1.9.0none
Resolution: fixed
Status: closedreopened
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).

comment:16 Changed 3 years ago by Scott González

Status: reopenedopen

comment:17 Changed 20 months ago by 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.

comment:18 Changed 20 months ago by Scott González

Milestone: none1.9.0
Resolution: fixed
Status: openclosed

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

comment:19 Changed 20 months ago by 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

Note: See TracTickets for help on using tickets.