fix: ensure host element is defined before focusing in multiple components

deleonio · deleonio · commit 63c7d1ddeaf0 · 2026-03-24T15:09:02.000+01:00
diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx
@@ -53,7 +53,9 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.buttonWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.buttonWcRef?.focus(this.host);
+		}
 	}
 
 	private handleOnClick = (event: MouseEvent) => {
diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx
@@ -29,7 +29,7 @@ export class KolAlertWc implements AlertAPI {
 	private readonly close = () => {
 		this._on?.onClose?.(new Event('Close'));
 		if (this.host) {
-			dispatchDomEvent(this.host as HTMLElement, KolEvent.close);
+			dispatchDomEvent(this.host, KolEvent.close);
 		}
 	};
 
diff --git a/packages/components/src/components/badge/shadow.tsx b/packages/components/src/components/badge/shadow.tsx
@@ -22,7 +22,7 @@ featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).
 	shadow: true,
 })
 export class KolBadge implements BadgeAPI, FocusableElement {
-	@Element() private readonly host!: HTMLKolBadgeElement;
+	@Element() private readonly host?: HTMLKolBadgeElement;
 	private bgColorStr = '#000';
 	private colorStr = '#fff';
 	private readonly id = nonce();
@@ -57,7 +57,9 @@ export class KolBadge implements BadgeAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return this.smartButtonRef?.focus(this.host);
+		if (this.host) {
+			return this.smartButtonRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -62,7 +62,9 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.buttonWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.buttonWcRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -54,7 +54,9 @@ export class KolButton implements ButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.buttonWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.buttonWcRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/details/shadow.tsx b/packages/components/src/components/details/shadow.tsx
@@ -39,7 +39,9 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.buttonWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.buttonWcRef?.focus(this.host);
+		}
 	}
 
 	private toggleTimeout?: ReturnType<typeof setTimeout>;
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -22,7 +22,7 @@ import { dispatchDomEvent, KolEvent } from '../../utils/events';
 	shadow: true,
 })
 export class KolForm implements FormAPI {
-	@Element() private readonly host?: HTMLKolTextareaElement;
+	@Element() private readonly host?: HTMLKolFormElement;
 	errorListBlock?: HTMLElement;
 	errorListFirstLink?: HTMLElement;
 	private readonly translateErrorListMessage = translate('kol-error-list-message');
@@ -61,7 +61,7 @@ export class KolForm implements FormAPI {
 
 	private readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);
 
-	private readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);
+	private readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement | undefined);
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -45,7 +45,9 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.linkWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.linkWcRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -41,7 +41,9 @@ export class KolLink implements LinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.linkWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.linkWcRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/popover-button/component.tsx b/packages/components/src/components/popover-button/component.tsx
@@ -1,6 +1,6 @@
 import { autoUpdate } from '@floating-ui/dom';
 import type { JSX } from '@stencil/core';
-import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Method, Prop, State, Watch } from '@stencil/core';
 import { KolButtonWcTag } from '../../core/component-names';
 import type {
 	AccessKeyPropType,
@@ -34,8 +34,6 @@ import clsx from '../../utils/clsx';
 })
 // class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props
 export class KolPopoverButtonWc implements PopoverButtonProps {
-	@Element() host!: HTMLElement;
-
 	private refButton?: HTMLKolButtonWcElement;
 	private refPopover?: HTMLDivElement;
 	private cleanupAutoPositioning?: () => void;
diff --git a/packages/components/src/components/popover-button/shadow.tsx b/packages/components/src/components/popover-button/shadow.tsx
@@ -34,7 +34,7 @@ import type { PopoverButtonProps } from '../../schema/components/popover-button'
 	shadow: true,
 })
 export class KolPopoverButton implements PopoverButtonProps, FocusableElement {
-	@Element() private readonly host!: HTMLKolPopoverButtonElement;
+	@Element() private readonly host?: HTMLKolPopoverButtonElement;
 	private ref?: HTMLKolPopoverButtonWcElement;
 
 	/**
@@ -64,7 +64,9 @@ export class KolPopoverButton implements PopoverButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.ref?.focus(this.host);
+		if (this.host) {
+			await this.ref?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
@@ -244,7 +244,7 @@ export class KolSelectWc implements SelectAPI {
 	@State() private inputHasFocus = false;
 
 	public constructor() {
-		this.controller = new SelectController(this, 'select', this.host as HTMLElement);
+		this.controller = new SelectController(this, 'select', this.host as HTMLElement | undefined);
 	}
 
 	private showAsAlert(): boolean {
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
@@ -51,7 +51,9 @@ export class KolSelect implements SelectProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.selectWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.selectWcRef?.focus(this.host);
+		}
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/skip-nav/shadow.tsx b/packages/components/src/components/skip-nav/shadow.tsx
@@ -43,7 +43,9 @@ export class KolSkipNav implements SkipNavAPI {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.firstLinkRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.firstLinkRef?.focus(this.host);
+		}
 	}
 
 	/**
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -37,11 +37,11 @@ import clsx from '../../utils/clsx';
 })
 export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	@Element() private readonly host?: HTMLKolSplitButtonElement;
-	private primaryButtonWcRef?: HTMLKolButtonWcElement;
+	private primaryButtonRef?: HTMLKolButtonWcElement;
 	private popoverButtonRef?: HTMLKolPopoverButtonWcElement;
 
 	private readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {
-		this.primaryButtonWcRef = ref;
+		this.primaryButtonRef = ref;
 	};
 
 	private readonly catchPopoverButtonRef = (ref?: HTMLKolPopoverButtonWcElement) => {
@@ -62,7 +62,9 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.primaryButtonWcRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.primaryButtonRef?.focus(this.host);
+		}
 	}
 
 	private readonly clickButtonHandler = {
diff --git a/packages/components/src/components/tabs/shadow.tsx b/packages/components/src/components/tabs/shadow.tsx
@@ -162,7 +162,9 @@ export class KolTabs implements TabsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		await this.currentTabButtonRef?.focus(this.host as HTMLElement);
+		if (this.host) {
+			await this.currentTabButtonRef?.focus(this.host);
+		}
 	}
 
 	private readonly catchTabButtonRef = (ref?: HTMLKolButtonWcElement) => {
@@ -220,7 +222,7 @@ export class KolTabs implements TabsAPI, FocusableElement {
 		return (
 			<div
 				ref={(el) => {
-					this.tabPanelsElement = el as HTMLElement;
+					this.tabPanelsElement = el;
 				}}
 				class={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}
 			>
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
@@ -16,7 +16,7 @@ import { validateOrientation } from '../../schema/props/orientation';
 	shadow: true,
 })
 export class KolToolbar implements ToolbarAPI {
-	@Element() host!: HTMLElement;
+	@Element() private readonly host?: HTMLElement;
 
 	@State() public state: ToolbarStates = {
 		_label: '',
@@ -135,7 +135,9 @@ export class KolToolbar implements ToolbarAPI {
 
 		this.currentIndex = nextIndex;
 		const item = this.getCurrentToolbarItem(nextIndex);
-		void item?.focus(item as HTMLElement);
+		if (this.host) {
+			void item?.focus(this.host);
+		}
 	}
 
 	/**
diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
@@ -18,7 +18,7 @@ import { tooltipClosed, tooltipOpened } from '../../utils/tooltip-open-tracking'
 	shadow: false,
 })
 export class KolTooltipWc implements TooltipAPI {
-	@Element() private host?: HTMLKolTooltipWcElement;
+	@Element() private readonly host?: HTMLKolTooltipWcElement;
 
 	private arrowElement?: HTMLDivElement;
 	private previousSibling?: Element | null;
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
@@ -15,11 +15,12 @@ import { nonce } from '../../utils/dev.utils';
 	shadow: false,
 })
 export class KolTreeItemWc implements TreeItemAPI {
+	@Element() private readonly host?: HTMLKolTreeItemWcElement;
+
 	private linkElement?: HTMLKolLinkWcElement;
 	private groupId = `tree-group-${nonce()}`;
 
 	@State() private level?: number;
-	@Element() host!: HTMLElement;
 
 	public render(): JSX.Element {
 		const { _href, _active, _hasChildren, _open, _label } = this.state;
@@ -127,7 +128,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 
 	private determineTreeItemDepth() {
 		let level = 0;
-		let traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;
+		let traverseItem: HTMLElement | null = (this.host?.parentNode as unknown as ShadowRoot)?.host.parentNode as HTMLElement;
 		while (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {
 			traverseItem = traverseItem.parentElement;
 			level += 1;
@@ -142,20 +143,24 @@ export class KolTreeItemWc implements TreeItemAPI {
 	private checkForChildren() {
 		this.state = {
 			...this.state,
-			_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),
+			_hasChildren: Boolean(this.host?.querySelector('slot')?.assignedElements?.().length),
 		};
 	}
 
 	/**
 	 * Focuses the link element.
 	 */
 	@Method() async focus() {
-		return Promise.resolve(this.linkElement?.focus(this.linkElement as HTMLElement));
+		if (this.host) {
+			return Promise.resolve(this.linkElement?.focus(this.host));
+		}
 	}
 
 	private async handleExpandClick(event: MouseEvent) {
 		event.preventDefault();
-		await this.linkElement?.focus(this.linkElement as HTMLElement);
+		if (this.host) {
+			await this.linkElement?.focus(this.host);
+		}
 		await this.expand();
 	}
 
@@ -175,7 +180,9 @@ export class KolTreeItemWc implements TreeItemAPI {
 
 	private async handleCollapseClick(event: MouseEvent) {
 		event.preventDefault();
-		await this.linkElement?.focus(this.linkElement as HTMLElement);
+		if (this.host) {
+			await this.linkElement?.focus(this.host);
+		}
 		await this.collapse();
 	}
 
diff --git a/packages/components/src/components/tree/component.tsx b/packages/components/src/components/tree/component.tsx
@@ -13,7 +13,7 @@ import { validateLabel } from '../../schema';
 	shadow: false,
 })
 export class KolTreeWc implements TreeAPI {
-	@Element() host!: HTMLElement;
+	@Element() private readonly host?: HTMLKolTreeWcElement;
 
 	@State() public state: TreeStates = {
 		_label: '',
@@ -74,7 +74,7 @@ export class KolTreeWc implements TreeAPI {
 	}
 
 	private getTopLevelTreeItems(): HTMLKolTreeItemElement[] {
-		return (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);
+		return (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);
 	}
 
 	private handleTreeChange(): void {
@@ -212,7 +212,7 @@ export class KolTreeWc implements TreeAPI {
 	// eslint-disable-next-line @typescript-eslint/require-await
 	private async ensureActiveItemVisibility() {
 		const findActiveItem = (): HTMLKolTreeItemElement | undefined => {
-			const rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];
+			const rootNodes = (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];
 			for (const rootNode of rootNodes) {
 				if (rootNode._active) {
 					return rootNode;

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export class KolAlertWc implements AlertAPI {`
`29`	`29`	`private readonly close = () => {`
`30`	`30`	`this._on?.onClose?.(new Event('Close'));`
`31`	`31`	`if (this.host) {`
`32`		`- dispatchDomEvent(this.host as HTMLElement, KolEvent.close);`
	`32`	`+ dispatchDomEvent(this.host, KolEvent.close);`
`33`	`33`	`}`
`34`	`34`	`};`
`35`	`35`