Angular mat-autocomplete: программная установка активного элемента

Question

Что ты пытаешься сделать?

Программная установка элемента на моей панели.

Что вы видите, что не соответствует вашим ожиданиям?

Использование функции keymanager автозаполнения setActiveItemфактически не обновляет визуальные элементы панели. При запуске визуального обновления вручную оно работает по щелчку мыши, но не при навигации с помощью клавиатуры.

Размножение

Демо StackBlitz

Действия по воспроизведению:

1. Щелкните по входу.
2. Нажмите на Show More.
3. SetActiveItem выбирает элемент по указанному индексу, но изменение выбора после этого прерывается.
4. Перейдите к Show More с клавиатурой.
5. Нажмите Enter.
6. SetActiveItem совсем не работает.

Среда

• Угловой: 8.2.8
• CDK / Материал: 8.2.2
• Браузеры: все они
• Операционная система (например, Windows, macOS, Ubuntu): все они

Ищу советы, как заставить это работать. Мой подход неверен или setActiveItem работает не так, как должен? В аннотациях к функциям это описывается как:

Устанавливает активный элемент для указанного элемента и добавляет к нему активные стили. Также удаляет активные стили из ранее активного элемента.

Это похоже на то, что мне нужно, но я не могу заставить его работать.

Answer 1

У меня была аналогичная проблема. В моем случае я использовал Ag-Grid, и это остановило распространение событий навигации с помощью стрелок. Вы уверены, что ваш Mat-Autocomplete получит событие?

Answer 2

Мне пришлось использовать setTimeout. Исправление было:

      setTimeout(() => {
     this.matSelect._keyManager.setActiveItem(1);
     this.matSelect._keyManager.setActiveItem(2);
}, 1);