fix(tabs): NG0950 required input is accessed before a value is set

Author: xidedix

projects/coreui-angular/src/lib/tabs-2/tab/tab.directive.ts

@@ -7,9 +7,12 @@ import {
   effect,
   ElementRef,
   inject,
+  Injector,
   Input,
   input,
   InputSignal,
+  OnInit,
+  runInInjectionContext,
   signal,
   untracked
 } from '@angular/core';
@@ -32,7 +35,8 @@ import { TabsService } from '../tabs.service';
     '[tabindex]': 'isActive() ? 0 : -1'
   }
 })
-export class TabDirective implements FocusableOption {
+export class TabDirective implements FocusableOption, OnInit {
+  readonly #injector = inject(Injector);
   readonly #destroyRef = inject(DestroyRef);
   readonly #elementRef = inject(ElementRef);
   readonly #tabsService = inject(TabsService);
@@ -77,9 +81,7 @@ export class TabDirective implements FocusableOption {
     alias: 'aria-controls'
   });
 
-  readonly isActive = computed<boolean>(
-    () => !this.#disabled() && this.#tabsService.activeItemKey() === this.itemKey()
-  );
+  readonly isActive = signal(false);
 
   readonly hostClasses = computed(() => ({
     'nav-link': true,
@@ -114,4 +116,13 @@ export class TabDirective implements FocusableOption {
   focus(origin?: FocusOrigin): void {
     this.#elementRef.nativeElement.focus();
   }
+
+  ngOnInit(): void {
+    runInInjectionContext(this.#injector, () => {
+      effect(() => {
+        const isActive = !this.#disabled() && this.#tabsService.activeItemKey() === this.itemKey();
+        this.isActive.set(isActive);
+      });
+    });
+  }
 }

projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts

@@ -60,10 +60,11 @@ export class TabsListComponent {
   #focusKeyManager!: FocusKeyManager<TabDirective>;
 
   readonly tabsEffect = effect(() => {
-    if (this.tabs().length === 0) {
+    const tabs = this.tabs();
+    if (tabs.length === 0) {
       return;
     }
-    this.#focusKeyManager = new FocusKeyManager(this.tabs())
+    this.#focusKeyManager = new FocusKeyManager(tabs)
       .skipPredicate((tab) => tab.disabled === true)
       .withHorizontalOrientation('ltr')
       .withHomeAndEnd()
@@ -79,11 +80,15 @@ export class TabsListComponent {
       )
       .subscribe();
 
-    const activeItem = this.tabs().find((tab) => untracked(tab.isActive)) ?? this.tabs().find((tab) => !tab.disabled);
-    const activeItemIndex = this.tabs().findIndex((tab) => tab === activeItem);
-    this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
-    this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
-    this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
+    untracked(() => {
+      setTimeout(() => {
+        const activeItem = tabs.find((tab) => tab.isActive()) ?? tabs.find((tab) => !tab.disabled);
+        const activeItemIndex = tabs.findIndex((tab) => tab === activeItem);
+        this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
+        this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
+        this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
+      });
+    });
   });
 
   tabsServiceEffect = effect(() => {