How to fix Angular bug requiring user to click a separate element before choosing a second mat chip

Issue

Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.

Now, before clicking anywhere else, click again on the text box as you did before.

This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.

Solution

Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site. But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.

// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
@ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...

  ngAfterViewInit() {
    fromEvent(this.fruitInput.nativeElement, 'click')
      .pipe(
        tap(() => {
          this.trigger.openPanel()
        })
      ).subscribe()
  }

Link to the full stackblitz: https://stackblitz.com/edit/angular-sb38ig

Answered By - nullptr.t