Ticket #6642 (open bug)
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: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: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: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.


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