Components: MatAutocompleteTrigger method openPanel() not opening the panel. Angular 6, Material Design v6.4.7

Created on 10 Oct 2018  路  4Comments  路  Source: angular/components

I'm submitting a ...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Using Angular 6, Material Design V6.4.7, the MatAutocompleteTrigger under AutoComplete has a method called openPanel() which is suppose to open the suggestion panel. But its not.

Minimal reproduction of the problem with instructions

here is the link to stackblitz, please check the html file under the app folder, there is a button, when clicked, should open the panel.
https://stackblitz.com/edit/angular-rjebzg

Environment



Angular version: 6.1.0



Browser:



    

  • [x] Chrome (desktop) version XX
    • 

  • [ ] Chrome (Android) version XX
    • 

  • [ ] Chrome (iOS) version XX
    • 

  • [ ] Firefox version XX
    • 

  • [ ] Safari (desktop) version XX
    • 

  • [ ] Safari (iOS) version XX
    • 

  • [ ] IE version XX
    • 

  • [ ] Edge version XX
    • 




For Tooling issues:



    

  • Node version: 8.11.1
    •
P3 materiaautocomplete help wanted
Source
picture rishilongia

Most helpful comment

The panel does open, but the issue is that it also binds a click event on the body which closes it immediately. You can work around it by calling openPanel in a timeout.

actually you can use $event.stopPropagation() as well to get it working.
please see this... https://stackblitz.com/edit/angular-rjebzg-nprmc7?file=app/autocomplete-overview-example.html

picture rishilongia on 11 Oct 2018
👍6

All 4 comments

The panel does open, but the issue is that it also binds a click event on the body which closes it immediately. You can work around it by calling openPanel in a timeout.

crisbeto picture crisbeto on 11 Oct 2018

The panel does open, but the issue is that it also binds a click event on the body which closes it immediately. You can work around it by calling openPanel in a timeout.

actually you can use $event.stopPropagation() as well to get it working.
please see this... https://stackblitz.com/edit/angular-rjebzg-nprmc7?file=app/autocomplete-overview-example.html

rishilongia picture rishilongia on 11 Oct 2018
👍6

I had the same issue.

I wanted the panel to open with only an empty <mat-optgroup> with a label.

It seems that the panel won't open if there's no options (even if there are empty optgroup)
Adding a <mat-option style="display: none"></mat-option> did the trick.

GuillaumeVerdon picture GuillaumeVerdon on 23 Apr 2019

@rishilongia 's solution works .

karocksjoelee picture karocksjoelee on 30 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

vitaly-t picture vitaly-t  路  3Comments
LoganDupont picture LoganDupont  路  3Comments
alanpurple picture alanpurple  路  3Comments
RoxKilly picture RoxKilly  路  3Comments
savaryt picture savaryt  路  3Comments