выдвижной ящик закрывается при нажатии клавиши выхода на циновке - выбрать внутри выдвижного ящика

Question

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

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

Фактически: весь выдвижной ящик для матов (боковое навигационное окно) закрывается при нажатии клавиши Escape, когда выбор коврика еще расширен.

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

Answer 1

В следующий раз, пожалуйста, создайте свою собственную редактируемую демонстрацию, чтобы мы могли поработать над ней.В любом случае, мое решение вашей проблемы - остановить распространение события нажатием клавиши escape.Это делается путем привязки события keydown.

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

Однако, обратите внимание, что если вы хотите использовать клавишу escape после выбора чего-либо на mat-select, вам придется «расфокусировать» mat-select, нажав / кликнув за пределами mat-select, чтобычто выбор циновки больше не является «сфокусированным».

<mat-form-field>
  <mat-label>Cars</mat-label>
  <mat-select (keydown.escape)="$event.stopPropagation()">
    <mat-option  *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Это не позволит клавише «escape» закрывать выдвижной ящик, когда фокусировка выбрана, но при этом можно закрыть выдвижной ящик с матом.клавиша «escape», когда вы не используете mat-select.