Angular Material AutoComplete with clear button is getting cleared by Enter

Question

Adding clear button (Section Input with a clear button) to my autocomplete component results in strange behaviour: hitting enter clears input either it's selected option or not.

To illustrate my issue, I modified stackblitz from originial angular material doc about autocomplete - added clear button behaviour. See this

I cannot figure out why this clear button works correctly in case of simple input, but breaks everything in case of autocomplete component, why it's being focused instead of input and 'click' handler is being called.

Any tips will be appreciated. Thanks in advance!

Answer 1

Since the MatFormField is inside a form, the clear button has the submit type by default, and it becomes the default button. Therefore, when you press Enter in an input element of the form, the button in clicked and the form is submitted. To prevent that, set the attribute type="button" on the clear button:

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

See this stackblitz for a demo.