Skip to content

Commit

Permalink
116404: Fixed expandable navbar section loosing focus on expand throu…
Browse files Browse the repository at this point in the history
…gh keyboard
  • Loading branch information
alexandrevryghem committed Jul 5, 2024
1 parent c3a26ea commit dc9b8cc
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID);
this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
this.isExpanded$ = combineLatestObservable([this.active$, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))),
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="ds-menu-item-wrapper text-md-center"
[id]="'expandable-navbar-section-' + section.id"
(mouseenter)="onMouseEnter($event, isActive)"
(mouseleave)="onMouseLeave($event, isActive)"
data-test="navbar-section-wrapper"
*ngVar="(active | async) as isActive">
(mouseenter)="onMouseEnter($event)"
(mouseleave)="onMouseLeave($event)"
data-test="navbar-section-wrapper">
<a href="javascript:void(0);" routerLinkActive="active"
role="menuitem"
(keyup.enter)="toggleSection($event)"
Expand All @@ -12,19 +11,18 @@
(keydown.space)="$event.preventDefault()"
aria-haspopup="menu"
data-test="navbar-section-toggler"
[attr.aria-expanded]="isActive"
[attr.aria-expanded]="(active$ | async).valueOf()"
[attr.aria-controls]="expandableNavbarSectionId(section.id)"
class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
[class.disabled]="section.model?.disabled"
id="browseDropdown">
<span class="flex-fill">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
<!-- <span class="sr-only">{{'nav.expandable-navbar-section-suffix' | translate}}</span>-->
</span>
<i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
</a>
<div @slide *ngIf="isActive" (click)="deactivateSection($event)"
<div @slide *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
[id]="expandableNavbarSectionId(section.id)"
role="menu"
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,12 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
/**
* When the mouse enters the section toggler activate the menu section
* @param $event
* @param isActive
*/
onMouseEnter($event: Event, isActive: boolean) {
onMouseEnter($event: Event): void {
this.isMobile$.pipe(
first(),
).subscribe((isMobile) => {
if (!isMobile && !isActive && !this.mouseEntered) {
if (!isMobile && !this.active$.value && !this.mouseEntered) {
this.activateSection($event);
}
this.mouseEntered = true;
Expand All @@ -100,13 +99,12 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
/**
* When the mouse leaves the section toggler deactivate the menu section
* @param $event
* @param isActive
*/
onMouseLeave($event: Event, isActive: boolean) {
onMouseLeave($event: Event): void {
this.isMobile$.pipe(
first(),
).subscribe((isMobile) => {
if (!isMobile && isActive && this.mouseEntered) {
if (!isMobile && this.active$.value && this.mouseEntered) {
this.deactivateSection($event);
}
this.mouseEntered = false;
Expand Down
8 changes: 5 additions & 3 deletions src/app/shared/menu/menu-section/menu-section.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ import { MenuSection } from '../menu-section.model';
export class MenuSectionComponent implements OnInit, OnDestroy {

/**
* Observable that emits whether or not this section is currently active
* {@link BehaviorSubject} containing the current state to whether this section is currently active
*/
active: Observable<boolean>;
active$: BehaviorSubject<boolean> = new BehaviorSubject(false);

/**
* The ID of the menu this section resides in
Expand Down Expand Up @@ -72,7 +72,9 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
* Set initial values for instance variables
*/
ngOnInit(): void {
this.active = this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged());
this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged()).subscribe((isActive: boolean) => {
this.active$.next(isActive);
});
this.initializeInjectorData();
}

Expand Down

0 comments on commit dc9b8cc

Please sign in to comment.