fix: update focus reference methods to accept optional parameters for improved clarity

deleonio · deleonio · commit 740b72d4e7b9 · 2026-03-26T13:38:38.000+01:00
diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx
@@ -45,8 +45,8 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 	private readonly nonce = nonce();
 	private buttonWcRef?: HTMLKolButtonWcElement;
 
-	private readonly setButtonWcRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.buttonWcRef = ref || undefined;
+	private readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {
+		this.buttonWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/badge/shadow.tsx b/packages/components/src/components/badge/shadow.tsx
@@ -29,8 +29,8 @@ export class KolBadge implements BadgeAPI, FocusableElement {
 	private readonly id = nonce();
 	private smartButtonRef?: HTMLKolButtonWcElement;
 
-	private readonly setSmartButtonRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.smartButtonRef = ref || undefined;
+	private readonly setSmartButtonRef = (ref?: HTMLKolButtonWcElement) => {
+		this.smartButtonRef = ref;
 	};
 
 	private renderSmartButton(props: InternalButtonProps): JSX.Element {
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -45,8 +45,8 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolButtonLinkElement;
 	private buttonWcRef?: HTMLKolButtonWcElement;
 
-	private readonly setButtonWcRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.buttonWcRef = ref || undefined;
+	private readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {
+		this.buttonWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -90,8 +90,8 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {
 			}
 		}
 	};
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.refInput = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.refInput = ref;
 	};
 
 	private selectOption(option: string) {
diff --git a/packages/components/src/components/details/shadow.tsx b/packages/components/src/components/details/shadow.tsx
@@ -31,8 +31,8 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 	private readonly nonce = nonce();
 	private buttonWcRef?: HTMLKolButtonWcElement;
 
-	private readonly setButtonWcRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.buttonWcRef = ref || undefined;
+	private readonly setButtonWcRef = (ref?: HTMLKolButtonWcElement) => {
+		this.buttonWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -54,8 +54,8 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputCheckboxElement;
 	private inputRef?: HTMLInputElement;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	private getModelValue(): StencilUnknown {
diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
@@ -46,11 +46,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	private refInputText?: HTMLInputElement;
 	private refInputColor?: HTMLInputElement;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.refInputText = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.refInputText = ref;
 	};
-	private readonly setColorRef = (ref: HTMLInputElement | null) => {
-		this.refInputColor = ref || undefined;
+	private readonly setColorRef = (ref?: HTMLInputElement) => {
+		this.refInputColor = ref;
 	};
 	private readonly onBlur = (event: FocusEvent) => {
 		this.controller.onFacade.onBlur(event);
diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
@@ -56,8 +56,8 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 
 	@State() private _initialValueType: 'Date' | 'String' | null = null;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
@@ -54,8 +54,8 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputEmailElement;
 	private inputRef?: HTMLInputElement;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
@@ -53,8 +53,8 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	private readonly translateDataBrowseText = translate('kol-data-browse-text');
 	private readonly translateFilenameText = translate('kol-filename-text');
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
@@ -53,8 +53,8 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputNumberElement;
 	private inputRef?: HTMLInputElement;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
@@ -59,8 +59,8 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	private readonly translateHidePassword = translate('kol-hide-password');
 	private readonly translateShowPassword = translate('kol-show-password');
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
@@ -52,11 +52,11 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 	private inputRef?: HTMLInputElement;
 	private inputRefs = new Map<number, HTMLInputElement>();
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
-	private readonly setInputRefByIndex = (index: number) => (ref: HTMLInputElement | null) => {
+	private readonly setInputRefByIndex = (index: number) => (ref?: HTMLInputElement) => {
 		if (ref) {
 			this.inputRefs.set(index, ref);
 		} else {
@@ -155,7 +155,7 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 			state: this.state,
 			inputProps: {
 				id: id,
-				ref: (ref: HTMLInputElement | null) => {
+				ref: (ref?: HTMLInputElement) => {
 					this.setInputRefByIndex(index)(ref);
 					if (selected) {
 						this.setInputRef(ref);
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
@@ -58,7 +58,7 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 		return delegateFocus(this.host!, () => setFocus(this.refInputNumber!));
 	}
 
-	private readonly setInputNumberRef = (element: HTMLInputElement | null) => {
+	private readonly setInputNumberRef = (element?: HTMLInputElement) => {
 		if (element) {
 			this.refInputNumber = element;
 			if (!this._value && this.refInputNumber?.value) {
@@ -67,7 +67,7 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 		}
 	};
 
-	private readonly setInputRangeRef = (element: HTMLInputElement | null) => {
+	private readonly setInputRangeRef = (element?: HTMLInputElement) => {
 		if (element) {
 			this.refInputRange = element;
 		}
diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
@@ -57,8 +57,8 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 	private inputRef?: HTMLInputElement;
 	private oldValue?: string;
 
-	private readonly setInputRef = (ref: HTMLInputElement | null) => {
-		this.inputRef = ref || undefined;
+	private readonly setInputRef = (ref?: HTMLInputElement) => {
+		this.inputRef = ref;
 	};
 
 	private readonly onBlur = (event: FocusEvent) => {
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -37,8 +37,8 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolLinkButtonElement;
 	private linkWcRef?: HTMLKolLinkWcElement;
 
-	private readonly setLinkWcRef = (ref: HTMLKolLinkWcElement | null) => {
-		this.linkWcRef = ref || undefined;
+	private readonly setLinkWcRef = (ref?: HTMLKolLinkWcElement) => {
+		this.linkWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -33,8 +33,8 @@ export class KolLink implements LinkProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolLinkElement;
 	private linkWcRef?: HTMLKolLinkWcElement;
 
-	private readonly setLinkWcRef = (ref: HTMLKolLinkWcElement | null) => {
-		this.linkWcRef = ref || undefined;
+	private readonly setLinkWcRef = (ref?: HTMLKolLinkWcElement) => {
+		this.linkWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/popover-button/shadow.tsx b/packages/components/src/components/popover-button/shadow.tsx
@@ -56,8 +56,8 @@ export class KolPopoverButton implements PopoverButtonProps, FocusableElement {
 		void this.ref?.showPopover();
 	}
 
-	private readonly setRef = (ref: HTMLKolPopoverButtonWcElement | null) => {
-		this.ref = ref || undefined;
+	private readonly setRef = (ref?: HTMLKolPopoverButtonWcElement) => {
+		this.ref = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
@@ -35,8 +35,8 @@ export class KolSelect implements SelectProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolSelectElement;
 	private selectWcRef?: HTMLKolSelectWcElement;
 
-	private readonly setSelectWcRef = (ref: HTMLKolSelectWcElement | null) => {
-		this.selectWcRef = ref || undefined;
+	private readonly setSelectWcRef = (ref?: HTMLKolSelectWcElement) => {
+		this.selectWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -80,8 +80,8 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 		return delegateFocus(this.host!, () => setFocus(this.refInput!));
 	}
 
-	private readonly setRefInput = (ref: HTMLInputElement | null) => {
-		this.refInput = ref || undefined;
+	private readonly setRefInput = (ref?: HTMLInputElement) => {
+		this.refInput = ref;
 	};
 
 	private toggleListbox = (event: Event) => {
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -41,12 +41,12 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	private primaryButtonWcRef?: HTMLKolButtonWcElement;
 	private popoverButtonRef?: HTMLKolPopoverButtonWcElement;
 
-	private readonly setPrimaryButtonWcRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.primaryButtonWcRef = ref || undefined;
+	private readonly setPrimaryButtonWcRef = (ref?: HTMLKolButtonWcElement) => {
+		this.primaryButtonWcRef = ref;
 	};
 
-	private readonly setPopoverButtonRef = (ref: HTMLKolPopoverButtonWcElement | null) => {
-		this.popoverButtonRef = ref || undefined;
+	private readonly setPopoverButtonRef = (ref?: HTMLKolPopoverButtonWcElement) => {
+		this.popoverButtonRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/tabs/shadow.tsx b/packages/components/src/components/tabs/shadow.tsx
@@ -166,8 +166,8 @@ export class KolTabs implements TabsAPI, FocusableElement {
 		return delegateFocus(this.host!, () => Promise.resolve(this.currentTabButtonRef?.focus?.()));
 	}
 
-	private readonly setCurrentTabButtonRef = (ref: HTMLKolButtonWcElement | null) => {
-		this.currentTabButtonRef = ref || undefined;
+	private readonly setCurrentTabButtonRef = (ref?: HTMLKolButtonWcElement) => {
+		this.currentTabButtonRef = ref;
 	};
 
 	private renderButtonGroup() {
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
@@ -66,8 +66,8 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolTextareaElement;
 	private textareaRef?: HTMLTextAreaElement;
 
-	private readonly setTextareaRef = (ref: HTMLTextAreaElement | null) => {
-		this.textareaRef = ref || undefined;
+	private readonly setTextareaRef = (ref?: HTMLTextAreaElement) => {
+		this.textareaRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
@@ -149,7 +149,7 @@ export class KolToolbar implements ToolbarAPI, FocusableElement {
 		this.currentIndex = nextIndex;
 		const item = this.getCurrentToolbarItem(nextIndex);
 		if (this.host) {
-			void item?.focus(this.host);
+			void item?.focus();
 		}
 	}
 
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
@@ -176,16 +176,14 @@ export class KolTreeItemWc implements TreeItemAPI {
 	 */
 	@Method() async focus() {
 		if (this.host && this.linkElement) {
-			const root = this.host.getRootNode();
-			const shadowHost = root instanceof ShadowRoot && root.host instanceof HTMLElement ? root.host : undefined;
-			return Promise.resolve(this.linkElement.focus(shadowHost ?? this.host));
+			return Promise.resolve(this.linkElement.focus());
 		}
 	}
 
 	private async handleExpandClick(event: MouseEvent) {
 		event.preventDefault();
 		if (this.host && this.linkElement) {
-			await this.linkElement.focus(this.host);
+			await this.linkElement.focus();
 		}
 		await this.expand();
 	}
@@ -209,7 +207,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 	private async handleCollapseClick(event: MouseEvent) {
 		event.preventDefault();
 		if (this.host && this.linkElement) {
-			await this.linkElement.focus(this.host);
+			await this.linkElement.focus();
 		}
 		await this.collapse();
 	}
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
@@ -16,8 +16,8 @@ export class KolTree implements TreeProps, FocusableElement {
 	@Element() private readonly host?: HTMLKolTreeElement;
 	private treeWcRef?: HTMLKolTreeWcElement;
 
-	private readonly setTreeWcRef = (ref: HTMLKolTreeWcElement | null) => {
-		this.treeWcRef = ref || undefined;
+	private readonly setTreeWcRef = (ref?: HTMLKolTreeWcElement) => {
+		this.treeWcRef = ref;
 	};
 
 	/**
diff --git a/packages/components/src/functional-components/Button/tests/snapshot.test.tsx b/packages/components/src/functional-components/Button/tests/snapshot.test.tsx
@@ -48,7 +48,7 @@ describe('KolButtonFc', () => {
 			</div>
 		));
 		const button = page.root?.querySelector('kol-button-wc') as HTMLKolButtonWcElement;
-		await button.focus(button as HTMLElement);
+		await button.focus();
 		await page.waitForChanges();
 		expect(page.root).toMatchSnapshot();
 	});

Original file line number	Diff line number	Diff line change
`@@ -90,8 +90,8 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {`
`90`	`90`	`}`
`91`	`91`	`}`
`92`	`92`	`};`
`93`		`- private readonly setInputRef = (ref: HTMLInputElement \| null) => {`
`94`		`- this.refInput = ref \|\| undefined;`
	`93`	`+ private readonly setInputRef = (ref?: HTMLInputElement) => {`
	`94`	`+ this.refInput = ref;`
`95`	`95`	`};`
`96`	`96`
`97`	`97`	`private selectOption(option: string) {`