116404: Apply focus on first item

(cherry picked from commit 2152bab717)
This commit is contained in:
Alexandre Vryghem
2024-07-05 16:02:42 +02:00
parent 53186988f5
commit 73285284ce
2 changed files with 11 additions and 5 deletions

View File

@@ -83,10 +83,13 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
ngAfterViewChecked(): void {
if (this.addArrowEventListeners) {
const dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
dropdownItems.forEach(item => {
const dropdownItems: NodeListOf<HTMLElement> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
dropdownItems.forEach((item: HTMLElement) => {
item.addEventListener('keydown', this.navigateDropdown.bind(this));
});
if (dropdownItems.length > 0) {
dropdownItems.item(0).focus();
}
this.addArrowEventListeners = false;
}
}
@@ -166,7 +169,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
this.deactivateSection(event, false);
break;
case 'ArrowDown':
this.navigateDropdown(event);
this.activateSection(event);
break;
case 'Space':
event.preventDefault();

View File

@@ -75,9 +75,12 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
/**
* Activate this section
* @param {Event} event The user event that triggered this method
* @param skipEvent Weather the event should still be triggered after deactivating the section or not
*/
activateSection(event: Event) {
event.preventDefault();
activateSection(event: Event, skipEvent = true): void {
if (skipEvent) {
event.preventDefault();
}
if (!this.section.model?.disabled) {
this.menuService.activateSection(this.menuID, this.section.id);
}