MatInput - On Mobile devices pressing enter key should trigger blur and hide keyboard
See original GitHub issueReproduction
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
Issue Analytics
- State:
- Created 4 years ago
- Comments:13 (7 by maintainers)
Top Results From Across the Web
Angular Material: Hide Autocomplete Panel when User hits ...
I have a mat-form-field with several dynamically created input fields with the mat-autocomplete element. However my enter key event acts a bit ...
Read more >Angular | keyup event - GeeksforGeeks
When a user presses and releases a key, the (keyup) event occurs. ... (keyup.z): Here change will be displayed on z character triggered....
Read more >Datepicker - Angular Material
The (dateChange) event will fire whenever the user finishes typing input (on <input> blur), or when the user chooses a date from the...
Read more >Element: focusout event - Web APIs | MDN
The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while...
Read more >material multi select with search - You.com - You.com
If you then click outside the overlay to close it again, ... The key is set md-min-length on <md-autocomplete> to 0 so it...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Doesn’t seem to work on Android 9 (Chrome 80).
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.