Angular Material: Hide Autocomplete Panel when User hits enter Key

mat-autocomplete trigger example
angular material autocomplete multiselect
mat-autocomplete clear button
mat-autocomplete default value
mat-autocomplete panel width
angular material select with search
angular material autocomplete api
angular material dropdown

I'm currently working on a table where the user is able to tab through editable elements by pressing enter. I also use Angular Material in this.

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 different in this.

When you press on the input field, a panel will open (dropdown) where the user can select the input or he can simply write himself and the panel will give suggestions (autocomplete).

What happens if you press the tab key?

If you press on tab while typing, the cursor will move onto the next editable element and the panel (dropdown) of the latest element will close.

What happens if you press the enter key

If you press on enter while typing, the cursor will move onto the next editable element HOWEVER the panel (dropdown) of the latest element stays open which resulst in multiple input fields having an open dropdown panel even though the user has already wrote what he needed to.

Template:

<tr *ngFor="let row of rows; let rowIdx = index">
            <td *ngFor="let col of columns; let colIdx = index">
                <mat-form-field class="example-full-width">             
                <input  #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                    (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
                    <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{ option }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>
            </td>
      </tr>

This simply creates rows based on the number of objects in an array (not quite important here).

There's also a keyup.enter event on the input fields which gets triggered when ever the user presses on enter while focus is on an input field and passes row index and column index to get the next editable element.

Component:

shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);  
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of row");
}
else {
  colIdx = colIdx + this.columns.findIndex(c => c.editable);
  this.autocomplete.showPanel = false;
  this.focusInput(rowIdx, colIdx);
}

}

This function receives two parameters. Row Index and Column Index and calculates the index of the next editable element to focus on that.

The line this.autocomplete.showPanel = false was written to see if I could simply close the panel like this but it didnt work.

this.autocomplete is an object of class MatAutocomplete. I've added this by writing

@Input('matAutocomplete')
autocomplete: MatAutocomplete

What I need:

I want the dropdown panel of the mat autocomplete element to close after pressing enter.

Thanks in advance!

Update:

So after working a bit I found this

@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;

+

this.test.closePanel();

This time I'm able to close the panel of the FIRST cell in the table however all the panels of the other input fields will stay open

My use case was slightly different so your update didn't work for me, but I found a slightly different solution that does the trick:

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

Then you can use this to close the dropdown options:

this.autocomplete.closePanel(); 

Make sure to also import ViewChild:

import { ViewChild } from '@angular/core';

Works like a charm.

Hide autocomplete options panel on disabled or add hidePanel , Hide the options panel of autocomplete if the input element goes disabled. (​User can select a option also if input is disabled after clear). Which versions of Angular, Material, OS, TypeScript, browsers are affected? 5.0.1  In my angular 4 project I have an issue with Material autocomplete. When I type something and the component shows suggestions if I scroll the page I see the suggestions panel unlinked from the autocomplete field like you see in the picture. But in the Material-Autocomplete I don't have this issue. This is my code:

This comment provides a solution where you can get a reference to the matAutocompleteTrigger directly on the input element, so that you can call closePanel() within the template. For example:

    <input
      type="text"
      matInput
      #trigger="matAutocompleteTrigger"
      (keydown.enter)="$event.target.blur(); trigger.closePanel()"
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />

Autocomplete, Whether the first option should be highlighted when the autocomplete panel is When disabled, the element will act as a regular input and the user won't be able A stream of actions that should close the autocomplete panel, including when  Hide the options panel of autocomplete if the input element goes disabled. Or add a method to hide the panel in an official way. What is the expected behavior? Hide the option panel if the input is disabled. Also if the panel was displayed before the input disabled. What is the current behavior? The option panel still displayed.

// This is my solution  ios/android panel not hide on done button virtual // 


<input type="text" placeholder="{{lbl.TipDoc}}"
class="form-control ui-inputtext ui-widget autocomp"
 #trigautoTipDoc ="matAutocompleteTrigger"
 aria-label="name" matInput                                        (blur)="OcuPanelAuto(trigautoTipDoc);"
formControlName="tipDocLbl" [matAutocomplete]="autoTipDoc" >
<mat-autocomplete #autoTipDoc="matAutocomplete" role="combobox">
<mat-option  *ngFor="let option of tipDocFiltObs | async"
                                                            [value]="option.name">
 {{option.name}}
</mat-option>
</mat-autocomplete>


OcuPanelAuto(cc: MatAutocompleteTrigger) {
        setTimeout(function a() {
            cc.closePanel();
        }, 130);
    }

Disable form submit on enter, Disable form submit on enter. Submit button is disabled until this task is fulfilled User hits enter-key in the Control field. then if the user goes again on this form,  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Hide Autocomplete Panel when User hits enter Key. 15

How do you call closePanel in angular 5 autoComplete material , autocomplete-overview-example'; import {HttpModule} from '@angular/http'; Use of this source code is governed by an MIT-style license that can be found MatAutocompleteTrigger }) autoComplete: MatAutocompleteTrigger; close() { this. filterStates(name)); } filterStates(val: string) { return val ? this.states.filter(s => s. Today we are going to create Autocomplete in Angular 8/9 using Angular Material UI components. The autocomplete is a functionality which shows the recommended options to the user when the user clicks on the input field or enters some keywords in an input field. We’ll create an Angular 8 app from scratch to show how […]

Building an Autocomplete Component with Vue.js, How to create a reusable autocomplete component with keyboard We also need to close the list of results once that happens for a better user experience. We'll do This way, when the user presses the enter key, we just need to get that index from the array of results. DigitalOcean Cloud Control Panel. How to trigger reactive form valueChanges subscription only on input blur and enter key in Angular 2 10 Angular Material: Hide Autocomplete Panel when User hits enter Key

How to set value taken from a database as default value for Angular , You can achieve this in one of two ways: Create a property in the ts file and assign a default value to this on ngOnInit and use model binding [(ngModel)]="​your  I am looking for a way to figure out when an mat-option inside the mat-autocomplete was either clicked or was selected using the enter key.. The click event binding works as expected but the keyup.enter or even just the keyup event doesn't work.

Comments
  • Instead of @Input, you should use @ViewChildren
  • If you patchValue or setValue on an input that uses material autocomplete, the panel will remain open afterwards. This solution is ideal to close that panel after updating the value. Thanks!!
  • I was totally missing that it was the trigger that I needed to reference in the code. Thank you!