Угловой материал - выпадающий раздел автозаполнения компонента не привязывается к полю ввода

Question

Компонент автозаполнения из angular-material не работает должным образом внутри компонента MatDialog.Секция drpodown компонента автозаполнения не привязывается к полю ввода.

ссылка на stackblitz - пример

, чтобы воспроизвести - Перейти к вышеуказанному stackblitz.Нажмите на кнопку «открыть всплывающее окно».Нажмите на поле автозаполнения «Pick One».Опции будут открыты как выпадающие.Затем прокрутите список всплывающих окон.Обратите внимание, что выпадающий раздел компонента автозаполнения не привязан к полю ввода.Как мне это исправить?

Answer 1

Добавить cdkScrollable к элементу прокрутки.

• Импорт ScrollingModule в app.module.ts
• Добавить cdkScrollable к элементу прокрутки

<div style="width: 300px; height: 100px; border: 1px solid red; overflow-y: auto;" cdkScrollable>
 <p>Angular Material, the ultimate design</p>
 <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let option of options" [value]="option">
     {{option}}
   </mat-option>
 </mat-autocomplete>
 <p>Angular Material, the ultimate design</p>
</div>

Answer 2

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

ng add @ angular / material

Answer 3

Это потому, что выпадающий список на самом деле является частью cdk-overlay-container, а не частью matAutocomplete ..., который запускается только matAutocomplete для визуализации в cdk-overlay-container с вычисленным topположение, основанное на расположении поля matAutocomplete input во время взаимодействия пользователя с полем.

Важное примечание: Контейнер CDK является прозрачным и имеет полную высоту иширина порта просмотра корневого браузера, перекрывая все в вашем приложении.

Если вы поместите этот matAutocomplete в середину диалога, откройте, затем закройте ... немного прокрутите позицию, снова откройте matAutocomplete ... вы заметите, что он рендерится в новой позиции с недавно вычисленным top, а не со старым ....

Как только он рендерится и в DOM через cdk-overlay-container однако, нет события прокрутки в реальном времени, чтобы заставить cdk-overlay-container «пересчитать» верхнюю позицию с событием прокрутки.

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

Если вы заметили, как только вы взаимодействуете сmat-select в том же диалоговом окне вы не можете прокрутить, пока оно открыто ... Я думаю, что они сделали это по этой конкретной причине, так как он также использует cdk-overlay-container для рендеринга выпадающего меню ... Я не совсем ясноо том, почему matAutocomplete не ведет себя так же.

---

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

::ng-deep .cdk-overlay-container{
  background-color: #ff000087;
}

Дополнительная информация о CDK здесь.

https://material.angular.io/cdk/overlay/overview