Angular Material Autocomplete: Autocomplete Panel doesn't collapse on Page Scroll when there are more than one Autocomplete control

1
votes

As shown in the stackblitz, I'm facing issue in closing the Autocomplete controls except first Autocomplete control(City) on Page Scroll when there are multiple Autocomplete Controls as shown in the stackblitz sample.

enter image description here

Steps to reproduce:

  1. Click on first - City Autocomplete control and let it stay expanded.

  2. Try to do page level scroll and then the City Autocomplete control collapses.

  3. Now Click on Second - State/Country Autocomplete control and let it stay expanded.

  4. Try to do page level scroll and see the State/Country Autocomplete control doesn't collapse.

Expected Behavior: State/Country Autocomplete control should collapse similar to City Autocomplete control on Page scroll.

Actual Behavior: State/Country Autocomplete control doesn't collapse on Page scroll.

1
angularautocompleteangular-materialangular7mat-autocomplete

1 Answers

0
votes

You should be using @ViewChildren decorator in order to hold of each of MatAutocompleteTriggers:

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

closePanels() {
  this.autoCompleteTriggers.forEach(trigger => {
    if (trigger.panelOpen) {
      trigger.closePanel();
    }
  });
}

Forked Stackblitz