AutoClose для ngbDropdown с использованием навигации по клавиатуре - PullRequest
Новая
       16

AutoClose для ngbDropdown с использованием навигации по клавиатуре

0 голосов
/ 16 апреля 2020

Я использую ngbDropdown с автоматическим закрытием. При использовании навигации без клавиатуры выпадающие меню корректно закрываются, когда я нажимаю на другие кнопки. Используя клавиатуру, я могу нажать вкладку и нажать Enter, после чего появляется выпадающее меню. Когда я переключаюсь в другое раскрывающееся меню и нажимаю ввод, предыдущее меню не закрывается, в результате чего появляются 2 видимых раскрывающихся меню. Это автоматическое закрытие не поддерживается для клавиатуры навигации? Вот небольшой пример: https://stackblitz.com/edit/angular-xg5veq-zbtuys

Спасибо!

1 Ответ

0 голосов
/ 22 апреля 2020

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

Этот обходной путь потребовал создания идентификатора пользователя для каждого компонента. 

...
import { v4 as uuidv4 } from "uuid";

@Component({
selector: "app-flyout-component",
templateUrl: "./flyout-component.component.html",
styleUrls: ["./flyout-component.component.css"],
providers: [NgbDropdownConfig]
})
export class FlyoutComponentComponent implements OnInit {

@ViewChild("drop", { static: false }) drop: any;
initDone = false;
uid: string;

constructor(ngbDropdownConfig: NgbDropdownConfig) {
this.uid = this.$generateUUID();
}

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

Обходной путь также имеет обработчик события focuslost, который закрывает раскрывающийся список при выключении табуляции.

Код в оригинальном стеке * блиц https://stackblitz.com/edit/angular-xg5veq-zbtuys

...