带有清除按钮的 Angular Material 自动完成被 Enter 清除

Question

将清除按钮(部分 Input with a clear button)添加到我的 autocomplete component导致奇怪的行为:点击回车清除输入，无论它是不是被选中的选项。

为了说明我的问题，我从关于自动完成的原始 Angular Material 文档修改了 stackblitz - 添加了清晰的按钮行为。见 this

我无法弄清楚为什么这个清除按钮在简单输入的情况下可以正常工作，但在自动完成组件的情况下会破坏一切，为什么它被聚焦而不是输入并且正在调用“单击”处理程序。

任何提示将不胜感激。提前致谢!

Answer 1

自 MatFormField在 form 里面, 清除按钮有 submit type 默认为 the default button .因此，当您在表单的输入元素中按 Enter 时，单击按钮并提交表单。为了防止这种情况，设置属性 type="button"在清除按钮上:

<button type="button" mat-button ...>

见 this stackblitz用于演示。