diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts
index 5544c4132..cd50af47a 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts
@@ -9,6 +9,7 @@ import {
ComponentRef,
computed,
Directive,
+ ElementRef,
EmbeddedViewRef,
HostListener,
inject,
@@ -74,6 +75,7 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit {
readonly active = signal(false);
protected readonly navbar = inject(SI_NAVBAR_VERTICAL);
+ private readonly elementRef = inject(ElementRef);
private flyoutOutsideClickSubscription?: Subscription;
private readonly viewContainer = inject(ViewContainerRef);
@@ -103,10 +105,12 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit {
hideFlyout(): void {
if (this.flyout()) {
this.flyout.set(false);
+ this.active.set(false);
this.flyoutAnchorComponentRef?.destroy();
this.flyoutAnchorComponentRef = undefined;
this.attachInline();
this.flyoutOutsideClickSubscription?.unsubscribe();
+ this.elementRef.nativeElement.focus();
}
}
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts
index 6220444a1..069273333 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: MIT
*/
import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { Component, computed, HostListener, inject } from '@angular/core';
+import { Component, computed, effect, HostListener, inject, viewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterLinkActive } from '@angular/router';
@@ -19,7 +19,6 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider';
[class.inline-group]="!flyout"
[class.dropdown-menu]="flyout"
[cdkTrapFocus]="flyout"
- [cdkTrapFocusAutoCapture]="flyout"
>
@@ -38,6 +37,7 @@ export class SiNavbarVerticalGroupComponent {
protected readonly navbar = inject(SI_NAVBAR_VERTICAL);
protected readonly groupTrigger = inject(SiNavbarVerticalGroupTriggerDirective);
private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
+ private readonly focusTrap = viewChild(CdkTrapFocus);
// Store initial value, as the mode for an instance never changes.
protected flyout = this.groupTrigger.flyout();
@@ -50,6 +50,12 @@ export class SiNavbarVerticalGroupComponent {
this.routerLinkActive?.isActiveChange
.pipe(takeUntilDestroyed())
.subscribe(active => this.groupTrigger.active.set(active));
+
+ effect(() => {
+ if (this.visible()) {
+ this.focusTrap()?.focusTrap.focusFirstTabbableElementWhenReady();
+ }
+ });
}
@HostListener('keydown.escape') protected close(): void {
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
index 09dd704ad..ea3783696 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
@@ -6,6 +6,7 @@ import {
ChangeDetectionStrategy,
Component,
computed,
+ ElementRef,
HostListener,
inject,
input,
@@ -65,7 +66,7 @@ export class SiNavbarVerticalItemComponent implements OnInit {
});
private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
private readonly siLink = inject(SiLinkDirective, { optional: true });
-
+ private readonly elementRef = inject(ElementRef);
/**
* Hides the badge in collapsed state
*/
@@ -108,6 +109,7 @@ export class SiNavbarVerticalItemComponent implements OnInit {
return;
}
this.parent?.group?.hideFlyout();
+ this.elementRef.nativeElement.focus();
if (!this.group) {
this.navbar.itemTriggered();
}
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
index 74f8b0d8c..dee8e6b20 100644
--- a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
@@ -82,10 +82,7 @@ export class SampleComponent implements OnInit {
label: 'Action',
icon: 'element-warning',
active: false,
- action: item => {
- item.active = true;
- this.logEvent('Callback for action called');
- }
+ action: () => this.logEvent('Callback for action called')
}
];