-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
autocomplete panel doesn't pop up when triggering focus on the input programatically #3106
Comments
I'm not at all familiar with using autocomplete.ts
/** Panel should hide itself when the option list is empty. */
_setVisibility() {
// Promise.resolve().then(() => this.showPanel = !!this.options.length);
this.zone.run(() => this.showPanel = !!this.options.length);
} |
Is there any workaround for this for now? |
The issue actually seems to be that clicking a button to focus the autocomplete triggers an As a workaround, you can use a setTimeout to focus it after the outside click event fires. |
Alternatively use |
Here's an updated plunker https://plnkr.co/edit/gyarTLKwyt97CX9304Fd?p=preview |
Below code did the trick for me assuming focus is already on input field.
|
Combined willshowell and bruteforce solutions to solve for our 508 compliance scenario. Clear button is another scenario: |
yeah, got the same issue while implement custom field with autocomplete, timeout works, but this is pretty weird |
Any update on this...? |
+1, any updates? |
This problem also affects chiplist inputs with autocomplete. 😢 |
Is there any workaround or fix for this issue? |
Me too, do you have any workaround? |
I got it working with the following: <input (focus)="onFocus()" ... > @ViewChild(MdAutocompleteTrigger) trigger;
onFocus() {
this.trigger._onChange("");
this.trigger.openPanel();
} |
Thank you for response. I'll try this solution and will check if this works. Just for a note that I'm fetching the list from REST API. |
Thanks @mischkl Regards, |
Thank you @mischkl 👍 that solution worked 😄 |
great! thanks |
Is there any other part missing from this? It's not working for me :( |
Hey, im trying to use the MatAutocompleteTrigger and openPanel, but, the function openPanel is undefined... how can i open the open from trigger? |
@lucas-sesti this works for me:
|
import { MatAutocompleteTrigger } from '@angular/material/autocomplete'; Is the above import correct? |
Quick fix in case you have more than 1 In your .html
In your .ts
Still this is a patch, in my case I discovered time after, that the problem was how data arrived after the first filter was executed. So I didn't use this solution anymore. Here the link where another developer had the same problem. |
Will this ever get fixed? |
… programmatically Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes angular#3106.
How is this bug still open? This is a seriously annoying bug which requires an annoying workaround when used together with reactive forms. |
… programmatically Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes angular#3106.
This bug is still present, and makes testing with This code:
will fail in roughly half of the time, as the panel gets closed immediatly in those cases. |
There's a pending PR that should make the autocomplete harness a bit more consistent in unit tests #23795. |
… programmatically Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes angular#3106.
… programmatically (#21081) Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes #3106. (cherry picked from commit c0ed5ce)
… programmatically (#21081) Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes #3106.
Glad to see it finally got fixed! 🥳 Thanks @andrewseguin |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
… programmatically (angular#21081) Each autocomplete has a `click` listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the `body` so when it does get there, it closes immediately. These changes fix the issue by taking advantage of the fact that focus usually moves on `mousedown` so for "real" click the input will have already lost focus by the time the `click` event happens. Fixes angular#3106.
see https://gist.run/?id=19eec6a0d5c69d65dbb847b12009ca9f, it starts working only after you do it the second time
@kara
The text was updated successfully, but these errors were encountered: