Keyboard navigation (tab and enter) in a form are not working as expected

Question

while navigating mat-form-fields in a form group, pressing enter on matInput input box goes to the previous dropdown.

Here is the code for HTML

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="outline">
    <mat-select formControlName="state" tabindex="1">
      <mat-option *ngFor="let s of states" [value]="s"> {{ s }} </mat-option>
    </mat-select>
    <button
      matSuffix
      mat-icon-button
      *ngIf="myForm?.get('state')?.value"
      (click)="clearFormControl('state')"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <input
      formControlName="name"
      placeholder="search person"
      matInput
      tabindex="2"
    />
    <button
      matSuffix
      mat-icon-button
      *ngIf="myForm?.get('name')?.value"
      (click)="clearFormControl('name')"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <input
      formControlName="email"
      placeholder="search email"
      matInput
      tabindex="3"
    />
    <button
      matSuffix
      mat-icon-button
      *ngIf="myForm?.get('email')?.value"
      (click)="clearFormControl('email')"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</form>

Here is the component.ts file

export class AppComponent {
  states = ['A', 'B', 'C'];

  myForm = new FormGroup({
    state: new FormControl(),
    name: new FormControl(),
    email: new FormControl()
  });

  constructor() { }

  clearFormControl(formControlName: string) {
    this.myForm.controls[formControlName].setValue(null);
  }

  onSubmit(): void { }
}

Issue -

Click here to understand the issue in action

Ideally, on pressing enter, it should not go to previous form field.

All ideas are welcomed.

Thank you.