fix(tree-item): improve focus handling and cache invalidation logic

Author: deleonio

packages/components/src/components/tree-item/component.tsx

@@ -147,23 +147,23 @@ export class KolTreeItemWc implements TreeItemAPI {
 		};
 	}
 
-	private getTreeParent(): HTMLKolTreeWcElement | undefined {
-		return this.host?.closest(KolTreeTag) as HTMLKolTreeWcElement | undefined;
+	private getTreeParent(): (HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void }) | undefined {
+		return this.host?.closest(KolTreeTag) as (HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void }) | undefined;
 	}
 
 	/**
 	 * Focuses the link element.
 	 */
 	@Method() async focus() {
-		if (this.host) {
-			return Promise.resolve(this.linkElement?.focus(this.host));
+		if (this.host && this.linkElement) {
+			return Promise.resolve(this.linkElement.focus(this.host));
 		}
 	}
 
 	private async handleExpandClick(event: MouseEvent) {
 		event.preventDefault();
-		if (this.host) {
-			await this.linkElement?.focus(this.host);
+		if (this.host && this.linkElement) {
+			await this.linkElement.focus(this.host);
 		}
 		await this.expand();
 	}
@@ -180,15 +180,14 @@ export class KolTreeItemWc implements TreeItemAPI {
 				_open: true,
 			};
 			// Invalidate the tree's cache of open items
-			const treeParent = this.getTreeParent();
-			(treeParent as any)?.invalidateOpenItemsCache?.();
+			this.getTreeParent()?.invalidateOpenItemsCache();
 		}
 	}
 
 	private async handleCollapseClick(event: MouseEvent) {
 		event.preventDefault();
-		if (this.host) {
-			await this.linkElement?.focus(this.host);
+		if (this.host && this.linkElement) {
+			await this.linkElement.focus(this.host);
 		}
 		await this.collapse();
 	}
@@ -205,8 +204,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 				_open: false,
 			};
 			// Invalidate the tree's cache of open items
-			const treeParent = this.getTreeParent();
-			(treeParent as any)?.invalidateOpenItemsCache?.();
+			this.getTreeParent()?.invalidateOpenItemsCache();
 		}
 	}
 

packages/components/src/components/tree/component.tsx

@@ -46,6 +46,8 @@ export class KolTreeWc implements TreeAPI {
 	 * Called by tree-item when expand/collapse occurs.
 	 * @internal
 	 */
+	@Method()
+	// eslint-disable-next-line @stencil-community/async-methods
 	public invalidateOpenItemsCache(): void {
 		this.cacheValid = false;
 	}
@@ -244,7 +246,7 @@ export class KolTreeWc implements TreeAPI {
 	}
 
 	@Listen('focusin')
-	public async handleFocusIn(event: FocusEvent) {
+	public handleFocusIn(event: FocusEvent) {
 		// When focus lands on the tree host, auto-delegate to first item
 		if (event.target === this.host) {
 			// Defer to next frame to ensure tree is fully ready
@@ -255,15 +257,14 @@ export class KolTreeWc implements TreeAPI {
 	}
 
 	@Listen('focusout')
-	public async handleFocusOut(event: FocusEvent) {
+	public handleFocusOut(event: FocusEvent) {
 		if (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {
 			/* Tree lost focus */
-			await this.ensureActiveItemVisibility();
+			this.ensureActiveItemVisibility();
 		}
 	}
 
-	// eslint-disable-next-line @typescript-eslint/require-await
-	private async ensureActiveItemVisibility() {
+	private ensureActiveItemVisibility() {
 		const findActiveItem = (): HTMLKolTreeItemElement | undefined => {
 			const rootNodes = (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];
 			for (const rootNode of rootNodes) {