Angular 如何使用单击时的芯片列表自动展开/折叠角度材质自动完成

我有一个应用程序，在自动完成中有一个预先填充的项目列表，一旦选中，这些项目将显示为芯片。用户可以选择、添加和删除。问题是，许多用户希望在鼠标单击输入字段时自动完成列表会展开。。。但是，只有当输入字段获得焦点时，而不是当焦点已经设置且列表已折叠时，才会发生这种情况

问题是，一半的用户希望鼠标单击输入控件，并期望自动完成展开或切换展开/折叠。问题是一旦选择了一个项目，芯片就被创建了，光标被放在autocomplete的输入控件上，其列表被折叠。当用户直观地再次单击输入控件以选择另一项时，自动完成不会展开。。。他们需要单击其他地方的焦点，然后再次单击输入字段以查看列表

这对于一些不使用关键字、不使用自动完成搜索功能的最终用户来说是令人困惑的，他们希望鼠标单击输入控件会再次展开，就像第一次那样，他们没有直观地意识到第一次展开是因为输入字段获得了焦点

用户使用键盘是可以的，因为他们可能知道列表中的内容，并且在键入时它会自动展开或折叠

切换展开/折叠或始终展开自动完成列表的最佳方式是什么，无论控件是否已具有焦点

---

我尝试将焦点设置在最后选择的芯片上，但这会影响用户使用键盘，因此这不是一个真正的解决方案。

一个解决方案是手动重新聚焦单击，这将导致下拉菜单打开。这感觉很奇怪，但是实现起来很简单。只需添加如下函数：

focusFruitInput(){
  this.fruitInput.nativeElement.blur();
  this.fruitInput.nativeElement.focus();
}

然后可以将此焦点函数绑定到输入上的单击事件：

<input placeholder="New fruit..."
       #fruitInput
       (click)="focusFruitInput()"
       //...
>

---

现在，无论您是否已将焦点放在输入上，当您在活动状态下单击输入时，它将打开自动完成下拉列表。

这非常有效，但我必须在焦点之前放置一个setTimeout，如setTimeout=>{This.fruitInput.nativeElement.focus；}；

focusFruitInput(){
  this.fruitInput.nativeElement.blur();
  this.fruitInput.nativeElement.focus();
}

<input placeholder="New fruit..."
       #fruitInput
       (click)="focusFruitInput()"
       //...
>