autocomplete panel doesn't pop up when triggering focus on the input programatically

[fxck]

see https://gist.run/?id=19eec6a0d5c69d65dbb847b12009ca9f, it starts working only after you do it the second time

@kara

[willshowell]

I'm not at all familiar with using ngZone, but it seems like this change fixes it

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);
}

[bergben]

Is there any workaround for this for now?

[willshowell]

The issue actually seems to be that clicking a button to focus the autocomplete triggers an _outsideClickStream event just after it has been opened, thus causing it to immediately close.

As a workaround, you can use a setTimeout to focus it after the outside click event fires.

http://plnkr.co/edit/cKYxnL9f8hV2Uklucd5d?p=preview

[willshowell]

Alternatively use stopPropagation() on the click event

http://plnkr.co/edit/m4W7zAGulSaxhPqqlpzp?p=preview

[willshowell]

Here's an updated plunker https://plnkr.co/edit/gyarTLKwyt97CX9304Fd?p=preview

[bruteforce]

Below code did the trick for me assuming focus is already on input field.

import { MdAutocompleteTrigger} from '@angular/material';

@ViewChild(MdAutocompleteTrigger) trigger;

this.trigger._onChange("");
this.trigger.openPanel();

[mpolutta]

Combined willshowell and bruteforce solutions to solve for our 508 compliance scenario. Clear button is another scenario:
openAutoSearchPanel() {
if (this.searchText.length === 0) {
this.autoSearchInputTrigger._onChange('');
this.autoSearchInputTrigger.openPanel();
}
}
clearSearchText() {
console.log('>>> clearing searchText');
this.searchText = '';
/// hack: Another reported workaround - Allow the ClickStream to finish executing via setTimeout.
/// #3106
setTimeout(() => {
this.autoSearchInput.nativeElement.focus();
this.openAutoSearchPanel();
});
}

[Charius]

yeah, got the same issue while implement custom field with autocomplete, timeout works, but this is pretty weird

[maxterry]

Any update on this...?

[tombolador]

+1, any updates?

[mischkl]

This problem also affects chiplist inputs with autocomplete. 😢

[RajendrasinhParmar]

Is there any workaround or fix for this issue?
I'm having a dropdown that fetches data dynamically from the server. When I click on the chip-list field it doesn't open autocomplete list until I input any character in that.

[hukacode]

This problem also affects chiplist inputs with autocomplete. 😢

Me too, do you have any workaround?

[mischkl]

I got it working with the following:

<input (focus)="onFocus()" ... >

@ViewChild(MdAutocompleteTrigger) trigger;

onFocus() {
  this.trigger._onChange(""); 
  this.trigger.openPanel();
}

[RajendrasinhParmar]

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.

[hukacode]

Thanks @mischkl
I changed to (click) and it's worked.

Regards,
Huka

[RajendrasinhParmar]

Thank you @mischkl 👍 that solution worked 😄

[ozgursarikamis]

I got it working with the following:

<input (focus)="onFocus()" ... >

@ViewChild(MdAutocompleteTrigger) trigger;

onFocus() {
  this.trigger._onChange(""); 
  this.trigger.openPanel();
}

great! thanks

[omaracrystal]

@ViewChild(MdAutocompleteTrigger) trigger;

Is there any other part missing from this? It's not working for me :(

[lucas-sesti]

Hey, im trying to use the MatAutocompleteTrigger and openPanel, but, the function openPanel is undefined... how can i open the open from trigger?

[thematho]

@lucas-sesti this works for me:

@ViewChild(MatAutocompleteTrigger, { static: true }) trigger: MatAutocompleteTrigger;
// ****
 onClick(){
      this.trigger.openPanel();
} 

[PanchakshariPM]

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

Is the above import correct?

[idotj]

Quick fix in case you have more than 1 <mat-autocomplete> in your component:

In your .html

<input (focus)="onFocus(0)" ... >
<input (focus)="onFocus(1)" ... >
<input (focus)="onFocus(2)" ... >

In your .ts

import {ViewChildren, QueryList} from '@angular/core';
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';

@ViewChildren(MatAutocompleteTrigger) autoComplete: QueryList<MatAutocompleteTrigger>;

onFocus(value){
this.autoComplete['_results'][value]._onChange('');
this.autoComplete['_results'][value].openPanel();
}

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.
I hope will help someone:
https://stackoverflow.com/questions/52536382/how-to-show-autocomplete-options-on-focus

[marcusshepp]

Will this ever get fixed?

[Lms24]

How is this bug still open? This is a seriously annoying bug which requires an annoying workaround when used together with reactive forms.

[KissBalazs]

This bug is still present, and makes testing with Harness quite difficult.

This code:

    const inputField = await loader.getHarness(MatAutocompleteHarness.with(
      { selector: '#autocompleteInput' }));
    await inputField.focus();
    const options = await inputField.getOptions();
    
    expect(options.length).toBeGreaterThan(0);

will fail in roughly half of the time, as the panel gets closed immediatly in those cases.

[crisbeto]

There's a pending PR that should make the autocomplete harness a bit more consistent in unit tests #23795.

[mischkl]

Glad to see it finally got fixed! 🥳 Thanks @andrewseguin

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}