Автозаполнение углового материала кнопкой очистки очищается нажатием Enter

Question

Добавление кнопки очистки (Секция Ввод с кнопкой очистки ) к моему автозаполнению компонента приводит к странному поведению: нажатие клавиши ввода очищает ввод либо выбранной опцией, либо нет.

Чтобы проиллюстрировать мою проблему, я изменил stackblitz из оригинального углового материала doc об автозаполнении - добавил поведение кнопки очистки.См. this

Я не могу понять, почему эта кнопка очистки работает правильно в случае простого ввода, но ломает все в случае автозаполнения компонента, почему она фокусируется вместо ввода и «щелчка»вызывается обработчик.

Любые советы будут оценены.Заранее спасибо!

Answer 1

Поскольку MatFormField находится внутри form, кнопка очистки по умолчанию имеет тип submit и становится кнопкой по умолчанию .Поэтому, когда вы нажимаете Введите в элементе ввода формы, кнопка нажимается, и форма отправляется.Чтобы предотвратить это, установите атрибут type="button" на кнопке очистки:

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

См. этот стек для демонстрации.