角度材料自动完成 - 如何防止键盘输入以在建议面板中选择一个选项

Posted 2023-02-22

【中文标题】角度材料自动完成 - 如何防止键盘输入以在建议面板中选择一个选项

【英文标题】：angular material autocomplete - how to prevent keyboard enter to select an option in the suggestion panel

【发布时间】：2019-12-13 00:02:13

【问题描述】：

我希望能够在通过箭头键选择活动选项时按下回车键时实现材料自动完成的自定义输入行为。

目前我有一个指令 (preventEnterDirective) 绑定到 matAutocomplete 所在的相同输入元素。当 keydown.enter 发出时，我会阻止默认设置。但是当 keydown.enter 发出时，选择已经完成。

<input preventEnterDirective type="text" [matAutocomplete]="auto" [formControl]="searchInputControl" type="text">

@HostListener('keydown.enter', ['$event']) public onEnter(evt: KeyboardEvent) 
    evt.preventDefault();

编辑

这是一个stackblitz repo

https://stackblitz.com/edit/angular-txehk4-sic3ej

编辑 2

我对 angular 的 autocomplete 指令的源代码进行了更深入的挖掘，并在 autocomplete-trigger.ts 的第 379 行找到了这个

  _handleKeydown(event: KeyboardEvent): void 
    const keyCode = event.keyCode;
    ...
    if (this.activeOption && keyCode === ENTER && this.panelOpen) 
      this.activeOption._selectViaInteraction();
      this._resetActiveItem();
      event.preventDefault();
     else if (this.autocomplete) 
      const prevActiveItem = this.autocomplete._keyManager.activeItem;
      const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;

      if (this.panelOpen || keyCode === TAB) 
        this.autocomplete._keyManager.onKeydown(event);
       else if (isArrowKey && this._canOpen()) 
        this.openPanel();
      

      if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) 
        this._scrollToOption();
      
    
  

所以基本上我有两个不同的指令，它们绑定到一个输入元素并调用了带有 preventDefault() 的侦听器。

【问题讨论】：

您是否在您的@HostListener 中尝试过return false？

是的，我开始怀疑，输入提交不是在输入元素上触发，而是在自动完成组件创建的其他 dom 元素上触发

那么您需要将@HostListener 放入组件中，每次收到事件时，您需要检查event.target 是否与您的自动完成元素匹配然后return false。

请同样创建一个Stackblitz项目，大家很容易解决这个问题并回答你。

你需要 stopPropagation()

【参考方案1】：

请从您的stackblitz 代码中删除您的代码autoActiveFirstOption="true"，它肯定会起作用。

【讨论】：

不...我已经在 EDIT 2 中发布了可能是源问题。

它 (autoActiveFirstOption="true") 总是将第一个选项设置为活动项目，所以无论何时按下回车键它总是（并且它总是选择第一个项目）。我认为没有其他选择。

你有没有在分叉堆栈闪电战中尝试过你的方法:)

是的！你有吗？ @韩车

好吧，我想我不够精确。对此感到抱歉。在我通过箭头键选择了一个活动选项之后，我想在按下回车键时实现自定义回车行为。