When you have a mat-form-field with a button in it, in a form, when you press enter it auto...

In Angular 17, if you have a mat-form-field with a button in it, like the below, then when you press enter on any other form input in the form, like a checkbox, radio-button it automatically places focus on the input with the button. This is odd, no? I think it's a bug.

<form [formGroup]="reactiveForm" >

<mat-radio-group aria-label="Select a fruit" formControlName="radioFruit">
<mat-radio-button aria-label="apples" value="apples">Apples</mat-radio-button>
<mat-radio-button aria-label="oranges" value="oranges">Oranges</mat-radio-button>
</mat-radio-group>

<mat-form-field>
<mat-label>Enter your password</mat-label>
<input matInput type="text">
<button mat-icon-button matSuffix >
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>

</form>

Continue reading...