Как исправить угловую ошибку, требующую от пользователя щелчка по отдельному элементу, прежде чем выбрать второй матовый чип

Question

Вот ссылка для примера проблемы, которую я попытаюсь описать. В примере автозаполнения фишек щелкните текстовое поле, чтобы выбрать новый фрукт.

Теперь, прежде чем щелкнуть где-либо еще, снова нажмите на текстовое поле, как вы делали раньше.

Это должно привести к тому, что опции не будут отображаться. Проблема здесь в том, что пользователь должен либо начать ввод нового выбора, либо сначала щелкнуть другой элемент в окне, прежде чем matchip покажет варианты для выбора. Мне интересно, если есть способ исправить эту проблему. Я бы хотел, чтобы пользователь мог выбрать выбор из списка, а затем сразу же щелкнуть текстовое поле, как было раньше, и сделать новый выбор.

Answer 1

Поскольку вы не опубликовали свой код и упомянули пример на сайте материалов, я собираюсь сделать это как ответ на пример stackblitz , который есть на их сайте. Но это позволит вам снова открыть панель автозаполнения, несмотря на наличие курсора и выбор варианта ранее.

// 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()
  }

Ссылка на полный стек: https://stackblitz.com/edit/angular-sb38ig