Skip to content

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

@fxck

Description

@fxck
Contributor

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

@kara

Activity

self-assigned this
on Feb 15, 2017
added
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
on Feb 15, 2017
willshowell

willshowell commented on Feb 23, 2017

@willshowell
Contributor

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

bergben commented on Jun 6, 2017

@bergben

Is there any workaround for this for now?

willshowell

willshowell commented on Jun 6, 2017

@willshowell
Contributor

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

willshowell commented on Jun 6, 2017

@willshowell
Contributor

Alternatively use stopPropagation() on the click event

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

willshowell

willshowell commented on Jul 24, 2017

@willshowell
Contributor
bruteforce

bruteforce commented on Sep 21, 2017

@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

mpolutta commented on Apr 2, 2018

@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

Charius commented on Apr 28, 2018

@Charius

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

maxterry

maxterry commented on Jul 13, 2018

@maxterry

Any update on this...?

tombolador

tombolador commented on Jul 31, 2018

@tombolador

+1, any updates?

mischkl

mischkl commented on Sep 17, 2018

@mischkl

This problem also affects chiplist inputs with autocomplete. 😢

31 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/autocomplete

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @maxterry@fxck@thematho@hukacode@kara

    Issue actions

      autocomplete panel doesn't pop up when triggering focus on the input programatically · Issue #3106 · angular/components