Angular Material、Mat Chips Autocomplete Bug、matChipInputTokenEnd 在 optionSelected 之前执行 [英] Angular Material, Mat Chips Autocomplete Bug, matChipInputTokenEnd executed before optionSelected

问题描述

在输入中输入一些文本并通过按回车键从自动完成中选择一个选项时，它会将两个字符串都保存为筹码.图片在这里

When typing some text into the input and selecting an option from the autocomplete by hiting enter, it saves as chips both of the strings. Image here

但是，使用鼠标从自动完成功能中选择选项时不会发生这种情况.

However, this doesn't happen when selecting an option from the autocomplete with the mouse.

在 Angular Material Autocomplete Chips 上提供的示例中，在所描述的情况下，optionSelected 首先触发，而在我本地机器上的相同代码中，它在 matChipInputTokenEnd 之后执行，从而导致错误.

In the example provided on Angular Material Autocomplete Chips, in the case described, the optionSelected fires first, while in the same code on my local machine it is executed after matChipInputTokenEnd, thus, leading to the bug.

有人遇到过这个问题吗?

Has anyone encountered this problem?

推荐答案

关于选择事件，当您按 ENTER 时，输入中的 matChipInputTokenEnd 和 optionSelected来自 ma​​t-autocomplete 的 em> 将触发.通常，这首先发生在 optionSelected 中，这样当输入事件触发时，芯片已经被添加，输入将没有值可以添加.这就是为什么用鼠标单击不会出现此问题的原因，因为只会触发 optionSelected 事件.

Regarding the selection event, when you press ENTER, both the matChipInputTokenEnd, from your input, and the optionSelected, from mat-autocomplete, will fire. Normally, this happens with the optionSelected first, so that when the input event fires, the chip will already be added and the input will have no value to add. This is the reason why you don't get this issue by clicking with your mouse, since only the optionSelected event will be fired.

现在我说通常是因为我在模块导入的组件上也遇到了这个问题.如果这是您的情况，这可能是一个错误.

Now I said normally because I've also been getting this problem on a module imported component. If this is your case, this is probably a bug.

但是，我确实找到了一个快速解决方案.我所做的是检查 ma​​t-autocomplete 对话框是否打开并阻止 ma​​t-chip-input 添加新元素.检查选项列表上的选定项目也是一种可能性，但它的性能较低，而不是我正在寻找的行为.

However, I did find a quick solution. What I did was check if the mat-autocomplete dialog was open and prevent the mat-chip-input from adding a new element. Checking for a selected item on the options list is also a possibility but it's less performant and not the behavior I was looking for.

希望这会有所帮助:

@ViewChild('chipAutocomplete') chipAutocomplete: MatAutocomplete;

addElement(event: MatChipInputEvent) {
  if ((event.value || '').trim() && !this.chipAutocomplete.isOpen) {
    this.value.push({
      name: event.value.trim()
    });
  }

  if (event.input) {
    event.input.value = '';
  }

  this.chipInputControl.setValue(null);
}

这篇关于Angular Material、Mat Chips Autocomplete Bug、matChipInputTokenEnd 在 optionSelected 之前执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！