Ticket #6642 (open bug)

Opened 3 years ago

Last modified 7 months ago

Autocomplete does not close properly inside a draggable dialog.

Reported by: stokes_dk Owned by:
Priority: major Milestone: 2.0.0
Component: ui.mouse Version: 1.8.6
Keywords: autocomplete dialog Cc:
Blocking: Blocked by:

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

comment:1 Changed 3 years ago by scott.gonzalez

  • Component changed from ui.core to ui.mouse

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

comment:2 Changed 3 years ago by scott.gonzalez

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 3 years ago by joern.zaefferer

Does mouse ever rely on elements having focus?

comment:4 Changed 3 years ago by joern.zaefferer

  • Status changed from new to open

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

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 2 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.9

comment:8 Changed 14 months 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 14 months ago by jkupko (previous) (diff)

comment:9 Changed 14 months ago by scott.gonzalez

  • Summary changed from Auotocmplete can not be used inside a dialog to Autocomplete does not close properly inside a draggable dialog.

comment:10 Changed 7 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0
Note: See TracTickets for help on using tickets.