Используйте javascript, чтобы щелкнуть мышью на опции Enter

Question

Положение

В mat-form-field у меня есть mat-select, который при нажатии показывает mat-options соответственно с входом для фильтрации вверху всех mat-options.

Желаемый результат

Пользователь нажимает на mat-select, и затем появляются параметры мата. Затем пользователь начинает печатать, а затем видит желаемый результат, поэтому он нажимает стрелку вниз на клавиатуре и нажимает клавишу ВВОД, чтобы выбрать параметр.

Изображение текущего пользовательского интерфейса с активным фильтром

Задача

Когда пользователь нажимает на <input>, чтобы начать фильтрацию mat-options, функция «ENTER to select» больше не работает для выбора mat-options.

Однако , если пользователь не нажимает на <input> для запуска фильтрации и просто использует клавиши со стрелками для навигации, а затем нажимает ENTER для выбора, mat-option будет выбран правильно.

Как я могу принудительно нажать, когда пользователь нажимает ENTER на mat-option, когда фильтр input активен?

Технологии

• Угловой 7.0.2

• @ угловой / материал ^ 7.0.2

• начальная загрузка ^ 4.1.3

вход-отфильтрованные-select.component.ts

<mat-form-field>
  <mat-select [placeholder]="placeholderMessage | titlecase" ngModel [required]="isRequired" name="filteredSelectControl" [(value)]="selectedValue">
    <mat-option class="filter-input-option">
      <input enterSelect type="text" class="form-control" placeholder="Type to filter..." [(ngModel)]="filterValue" name="filterValue" (ngModelChange)="filteredData = filterData(filterValue)" (click)="preventClose($event)" />
    </mat-option>
    <mat-option (click)="onSelect()" *ngFor="let data of filteredData" [value]="data">
      {{ data.name }}
    </mat-option>
    <mat-option (click)="onAddNew()" *ngIf="filteredData.length === 0 && showNoOptionAddNew">Add new {{ filterSubject }}</mat-option>
    <mat-option *ngIf="filteredData.length === 0 && showNoOptionNoDriver">New driver&apos;s can only be added by an admin</mat-option>
  </mat-select>
  <mat-error>{{ errorMessage }}</mat-error>
</mat-form-field>

Что я сейчас пытаюсь

Я пытаюсь создать директиву под названием enterSelect, которая находит mat-option с классом mat-option ng-star-inserted mat-active и принудительно щелкает по HTMLElement, но в данный момент это не работает. Вот мой код:

введите-select.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[enterSelect]'
})
export class EnterSelectDirective {

  selectedElement: HTMLElement; 
  targetElement: HTMLElement; 

  constructor() { }

  /**
   * @HostListener to click the POST button if the user
   * presses the ENTER key - Allows for Shift+Enter for
   * new line
   * @param event   keypress
   * @returns       false
   */

  @HostListener('keydown', ['$event']) onkeydown(event) {
    let e = <KeyboardEvent> event; 
    if (e.which === 13) {

      this.selectedElement = (<HTMLElement>e.srcElement.closest('div').getElementsByClassName('mat-option ng-star-inserted mat-active')[0]);
      console.log(this.selectedElement.click());
      console.log('Enter clicked!!!');  

      e.preventDefault();   
      return false; 
    }
  }
}

Answer 1

Я решил решение, выполнив следующие шаги:

• Удалил EnterSelectDirective - мне это вообще не нужно
• Удален <mat-option>, содержащий фильтр <input>
• Добавлен (click)="preventClose($event) к <input>
• Закомментируйте event.stopImmediatePropagation() в функции preventClose($event) в моем файле Typescript

Короче говоря, я удалил весь код, который остановил распространение на click(), и удалил <mat-option>, который сделал ввод опцией, когда это вообще не было опцией. Не делая завертывания в <mat-option>, мне не нужно было останавливать распространение.

Теперь я могу задействовать фильтр <input>, использовать клавиши со стрелками для навигации по моим параметрам и затем нажать ENTER, чтобы выбрать мой вариант.

Рабочий код

<mat-form-field>
  <mat-select [placeholder]="placeholderMessage | titlecase" [(ngModel)]="selectedValue" [required]="isRequired" name="filteredSelectControl">
      <input type="text" class="form-control" placeholder="Type to filter..." [(ngModel)]="filterValue" name="filterValue" (ngModelChange)="filteredData = filterData(filterValue)"  (click)="preventClose($event)" />
    <mat-option (click)="onSelect(data)" *ngFor="let data of filteredData" [value]="data">
      {{ data.name }}
    </mat-option>
    <mat-option (click)="onAddNew()" *ngIf="filteredData.length === 0 && showNoOptionAddNew">Add new {{ filterSubject }}</mat-option>
    <mat-option *ngIf="filteredData.length === 0 && showNoOptionNoDriver">New driver&apos;s can only be added by an admin</mat-option>
  </mat-select>
  <mat-error>{{ errorMessage }}</mat-error>
</mat-form-field>