diff --git a/libs/components/src/a11y/a11y-grid.directive.ts b/libs/components/src/a11y/a11y-grid.directive.ts index 49a92686372..f3db9ca4ee2 100644 --- a/libs/components/src/a11y/a11y-grid.directive.ts +++ b/libs/components/src/a11y/a11y-grid.directive.ts @@ -57,7 +57,7 @@ export class A11yGridDirective { ); private numColumns = computed(() => this.renderedRow().length); - private focusTarget = computed(() => this.renderedRow()?.[this.activeCol()]?.getFocusTarget()); + focusTarget = computed(() => this.renderedRow()?.[this.activeCol()]?.getFocusTarget()); constructor() { // init the grid diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts index 1ef4a4af1fa..ef648943201 100644 --- a/libs/components/src/item/item.component.ts +++ b/libs/components/src/item/item.component.ts @@ -1,11 +1,15 @@ import { ChangeDetectionStrategy, Component, + ElementRef, HostBinding, HostListener, + effect, + inject, signal, } from "@angular/core"; +import { A11yGridDirective } from "../a11y/a11y-grid.directive"; import { A11yRowDirective } from "../a11y/a11y-row.directive"; import { ItemActionComponent } from "./item-action.component"; @@ -36,6 +40,23 @@ export class ItemComponent extends A11yRowDirective { this.focusVisibleWithin.set(false); } + private a11yGrid = inject(A11yGridDirective); + private el = inject(ElementRef); + + constructor() { + super(); + + /** Workaround to reset internal component state when view is recycled during virtual scroll */ + effect( + () => { + if (!this.el.nativeElement.contains(this.a11yGrid.focusTarget())) { + this.focusVisibleWithin.set(false); + } + }, + { allowSignalWrites: true }, + ); + } + @HostBinding("class") get classList(): string[] { return [ this.focusVisibleWithin()