Open method not working as expected

Open method not working as expected.

Bug description

I’m trying to implement custom “multiple chips select with autocomplete” feature (example here: https://material.angular.io/components/chips/examples) using your autocomplete llibrary.

After selecting an entry I remove it from the [data] input, hence from autocomplete panel. After deleting chips i push the entry back into the [data], entry correctly appears in the panel. Works great for all the cases except when I select all entries and then deselect them. After pushing entries back to [data] list and trying to select them, autocomplete panel won’t open onFocus. I have to click somewhere else and then click back on the input in order to open it.

I have tried to work around this behaviour by forcing open by using open() method inside onFocus(). I am unable to achieve force open.

Expected result

1. Panel should open when open() is called.
2. Panel should open onFocus after it was emptied but then filled with data again.

Actual result

1. Panel doesn’t open on open()
2. Panel opens only when we click somewhere else first and then click back on autocomplete.

Steps to reproduce

1. Select ng-autocomplete.
2. Try to force panel to open.

Template:

     <ng-autocomplete
        #autocompleteInput
        [data]="items"
        [searchKeyword]="keyword"
        (selected)='selectEvent($event)'
        (inputChanged)='onChangeSearch($event)'
        (inputFocused)='onFocused($event)'
        [itemTemplate]="itemTemplate"
        [notFoundTemplate]="notFoundTemplate">
     </ng-autocomplete>
      
     <div>
          <button (click)="openPanel()">OPEN PANEL</button>
     </div>

Component:

@ViewChild('autocompleteInput') autocompleteInput: any;

openPanel() {
    this.autocompleteInput.open();
}

Context

Replicate angular material behaviour without integrating whole angular material library.

Your Environment

• Version used: 2.0.5
• Browser Name and version: Chrome Version 95.0.4638.54 (Official Build) (64-bit)
• Operating System and version: Windows 10
• Link to your project:

[marexv]

@gmerabishvili Hi, indirectly, by reloading whole component. As far as I am concerned you can close this. Thank you for your effort 💯

[arvedhansen]

I’ve had the same/a similiar problem. I used a FormControl for the value and when the value was null, the panel did neither open on focus or when calling open() manually. When i set the value to an empty string instead of null, it worked as it should.