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

[naveedahmed1]

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

[crisbeto]

MatInput isn't doing anything in particular that could prevent this. Maybe it depends on the context that the input is used in? E.g. if it's inside a form.

[naveedahmed1]

I got it fixed by adding below code in form submit function:

if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }

[crisbeto]

Interesting, we have some logic that focuses the input on clicks inside the form field. I wonder whether pressing enter doesn't end up firing that click handler.

[naveedahmed1]

Well I don't think so, if we have multiple input fields in a form and we set focus on first input and press enter key, it sets focus on next input. If pressing enter was firing click handler, it shouldn't set focus on next input, right?

[crisbeto]

This example seems to work for me on iOS. I'm not able to test it against Android.

[naveedahmed1]

Probably because of alert('searching'); which sets focus to the alert dialog.

[crisbeto]

This one works too: https://stackblitz.com/edit/angular-jtechm-pxjet5.

[naveedahmed1]

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

[mmalerba]

Looking at the example @crisbeto gave (stackblitz.com/edit/angular-jtechm-pxjet5) on my android device, the keyboard does not close for either input. Can you please confirm if you are seeing the issue with just the form-field or with the native input too?

[naveedahmed1]

It seems that the issue is with form-field, because when i try this demo of native form input where type is search it works fine https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_search