MatInput - On Mobile devices pressing enter key should trigger blur and hide keyboard

Reproduction

On mobile devices we often have text fields for example in case of search bar, where we want the form to be submitted when user hits enter key or search button on keyboard. When using normal HTML input, pressing enter/search button automatically submits the form and hides the keyboard.

When using matInput, though pressing enter/search button does submit the form but it doesn’t hides the keyboard.

<form [formGroup]="form" (ngSubmit)="search()">
              <mat-form-field class="mat-form-field-full-width">
                <input matInput formControlName="keywords" type="search" placeholder="Title">
              </mat-form-field>
</form>

Expected Behavior

When using matInput, pressing enter/search button should hide the keyboard.

Actual Behavior

The keyboard remains visible although the form is submitted.

Environment

• Angular: 9.x
• CDK/Material:9.x
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Android

[naveedahmed1]

Doesn’t seem to work on Android 9 (Chrome 80).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}