Угловой материал: скрыть панель автозаполнения, когда пользователь нажимает клавишу ввода.

В настоящее время я работаю над таблицей, где пользователь может перемещаться по редактируемым элементам, нажимая клавишу ввода. В этом я также использую Angular Material.

У меня есть поле mat-form-field с несколькими динамически создаваемыми полями ввода с элементом mat-autocomplete. Однако мое событие ввода ключа действует немного по-другому.

Когда вы нажмете на поле ввода, откроется панель (раскрывающаяся), где пользователь может выбрать вход или он может просто написать сам, и панель выдаст предложения (автозаполнение).

Что произойдет, если вы нажмете клавишу табуляции?

Если вы нажмете клавишу Tab во время набора текста, курсор переместится на следующий редактируемый элемент и панель (раскрывающийся список) последней элемент закроется.

Что произойдет, если вы нажмете клавишу ввода

Если вы нажмете клавишу ввода во время набора текста, курсор переместится на следующий редактируемый элемент ОДНАКО панель (выпадающий) последнего элемента остается открытым, что приводит к нескольким полям ввода, имеющим открытую раскрывающуюся панель, даже если пользователь уже написал то, что ему нужно.

Шаблон:

<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>

Это просто создает строки на основе количества объектов в массиве (здесь это не совсем важно).

В полях ввода также есть событие keyup.enter, которое срабатывает, когда пользователь нажимает клавишу ввода, когда фокус находится на поле ввода и передает индекс строки и индекс столбца, чтобы получить следующий редактируемый элемент.

Компонент:

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.autocomplete.showPanel = false была написана, чтобы посмотреть, смогу ли я просто закрыть панель, как это, но это не сработало.

this.autocomplete является объектом класса MatAutocomplete . Я добавил это, написав

@Input('matAutocomplete')
autocomplete: MatAutocomplete

Что мне нужно:

Я хочу, чтобы раскрывающаяся панель элемента автозаполнения мата закрывалась после нажатия клавиши ввода.

Заранее спасибо!

Обновление:

Поэтому, немного поработав, я нашел это

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

+

this.test.closePanel();

На этот раз я могу закрыть панель ПЕРВОЙ ячейки в таблице, однако все панели других полей ввода останутся открытыми