fix: moving with tab changes the activeitem of the keymanager

spartan-ng · Nov 23, 2023 · 83cac71 · 83cac71
1 parent 5fe8b90
commit 83cac71
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 35 deletions.
diff --git a/libs/ui/accordion/accordion.stories.ts b/libs/ui/accordion/accordion.stories.ts
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { BrnAccordionComponent, BrnAccordionImports } from './brain/src';
-import { HlmAccordionImports, HlmAccordionTriggerDirective } from './helm/src';
+import { HlmAccordionImports } from './helm/src';
 
 const meta: Meta<BrnAccordionComponent> = {
 	title: 'Accordion',
 	component: BrnAccordionComponent,
 	decorators: [
 		moduleMetadata({
-			imports: [BrnAccordionImports, HlmAccordionImports, HlmAccordionTriggerDirective],
+			imports: [BrnAccordionImports, HlmAccordionImports],
 		}),
 	],
 };
@@ -20,35 +20,35 @@ export const Default: Story = {
 	render: () => ({
 		template: `
       <brn-accordion hlm>
-      <brn-accordion-item hlm>
-        <button hlmAccordionTrigger>
-          <span>What is SPARTAN</span>
-          <hlm-accordion-icon />
-        </button>
-        <brn-accordion-content hlm>
-          It is a collection of full-stack technologies that provide end-to-end type-safety.
-        </brn-accordion-content>
-      </brn-accordion-item>
+        <brn-accordion-item hlm>
+          <button hlmAccordionTrigger>
+            <span>What is SPARTAN</span>
+            <hlm-accordion-icon />
+          </button>
+          <brn-accordion-content hlm>
+            It is a collection of full-stack technologies that provide end-to-end type-safety.
+          </brn-accordion-content>
+        </brn-accordion-item>
 
-      <brn-accordion-item hlm>
-      <button hlmAccordionTrigger>
-          <span>What is SPARTAN Brain</span>
-          <hlm-accordion-icon />
-        </button>
-        <brn-accordion-content hlm>
-          A collection of unstyled UI primitives that provide accessibility out of the box.
-        </brn-accordion-content>
-      </brn-accordion-item>
+        <brn-accordion-item hlm>
+          <button hlmAccordionTrigger>
+            <span>What is SPARTAN Brain</span>
+            <hlm-accordion-icon />
+          </button>
+          <brn-accordion-content hlm>
+            A collection of unstyled UI primitives that provide accessibility out of the box.
+          </brn-accordion-content>
+        </brn-accordion-item>
 
-            <brn-accordion-item hlm>
-        <button hlmAccordionTrigger>
-          <span>What is SPARTAN Helm</span>
-          <hlm-accordion-icon />
-        </button>
-        <brn-accordion-content hlm>
-          Directives, sometimes additional components, that provide shadcn like styles for the Angular ecosystem.
-        </brn-accordion-content>
-      </brn-accordion-item>
+        <brn-accordion-item hlm>
+          <button hlmAccordionTrigger>
+            <span>What is SPARTAN Helm</span>
+            <hlm-accordion-icon />
+          </button>
+          <brn-accordion-content hlm>
+            Directives, sometimes additional components, that provide shadcn like styles for the Angular ecosystem.
+          </brn-accordion-content>
+        </brn-accordion-item>
       </brn-accordion>
     `,
 	}),

diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts b/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts
@@ -1,5 +1,7 @@
 import { AfterContentInit, Directive, ElementRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { rxHostPressedListener } from '@spartan-ng/ui-core';
+import { fromEvent } from 'rxjs';
 import { BrnAccordionItemComponent } from './brn-accordion-item.component';
 import { BrnAccordionComponent } from './brn-accordion.component';
 
@@ -34,8 +36,14 @@ export class BrnAccordionTriggerDirective implements AfterContentInit {
 			throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.');
 		}
 		this._HostPressedListener.subscribe(() => {
-			this.toggleAccordionItem();
+			this._accordion.toggleItem(this._item.id);
 		});
+
+		fromEvent(this._elementRef.nativeElement, 'focus')
+			.pipe(takeUntilDestroyed())
+			.subscribe(() => {
+				this._accordion.setActiveItem(this._item.id);
+			});
 	}
 	ngAfterContentInit(): void {
 		console.log('BrnAccordionTriggerDirective.ngAfterContentInit');
@@ -44,8 +52,4 @@ export class BrnAccordionTriggerDirective implements AfterContentInit {
 	public focus() {
 		this._elementRef.nativeElement.focus();
 	}
-
-	protected toggleAccordionItem() {
-		this._accordion.toggleItem(this._item.id);
-	}
 }
diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts
@@ -65,9 +65,11 @@ export class BrnAccordionComponent implements AfterContentInit {
 			this._keyManager?.onKeydown(event as KeyboardEvent);
 		});
 	}
+	public setActiveItem(id: number) {
+		this._keyManager?.setActiveItem(id);
+	}
 
 	public toggleItem(id: number) {
-		this._keyManager?.setActiveItem(id);
 		if (this._openItemIds().includes(id)) {
 			this._openItemIds.update((ids) => ids.filter((openId) => id !== openId));
 			return;