带有清除按钮的 Angular Material AutoComplete 正在被 Enter 清除

Question

将清除按钮（Input with a clear button 部分）添加到我的 autocomplete component 会导致奇怪的行为：按回车键会清除输入，无论它是否被选中。

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

我不明白为什么这个清除按钮在简单输入的情况下可以正常工作，但在自动完成组件的情况下会破坏所有内容，为什么它被聚焦而不是输入和“点击”处理程序被调用。

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

Answer 1

由于MatFormField在form中，所以清除按钮默认为submit类型，它变成the default button。因此，当您在表单的输入元素中按 Enter 时，单击按钮并提交表单。为了防止这种情况，请在清除按钮上设置属性type="button"：

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

请参阅this stackblitz 以获取演示。