Improve _value type for single select: Allow arbitrary values (#7428)

public-ui · Mar 4, 2025 · 5948a63 · 5948a63
2 parents 923f011 + afa7f73
commit 5948a63
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/packages/components/src/components/single-select/controller.ts b/packages/components/src/components/single-select/controller.ts
@@ -1,4 +1,5 @@
-import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, W3CInputValue } from '../../schema';
+import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';
+import { watchValidator } from '../../schema';
 import { validateOptions, watchBoolean, watchString } from '../../schema';
 
 import { InputIconController } from '../@deprecated/input/controller-icon';
@@ -42,8 +43,8 @@ export class SingleSelectController extends InputIconController implements Singl
 		watchBoolean(this.component, '_required', value);
 	}
 
-	public validateValue(value?: string): void {
-		watchString(this.component, '_value', value);
+	public validateValue(value?: StencilUnknown): void {
+		watchValidator(this.component, '_value', v => v !== undefined, new Set([`StencilUnknown`]), value);
 	}
 
 	public validatePlaceholder(value?: string): void {

diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -11,6 +11,7 @@ import type {
 	ShortKeyPropType,
 	SingleSelectAPI,
 	SingleSelectStates,
+	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
@@ -47,11 +48,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 	@Element() private readonly host?: HTMLKolSingleSelectElement;
 	private refInput?: HTMLInputElement;
 	private refOptions: HTMLLIElement[] = [];
-	private oldValue?: string;
+	private oldValue?: StencilUnknown;
 
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
-	public async getValue(): Promise<string | undefined> {
+	public async getValue(): Promise<StencilUnknown | undefined> {
 		return this._value;
 	}
 
@@ -502,7 +503,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 	/**
 	 * Defines the value of the input.
 	 */
-	@Prop({ mutable: true, reflect: true }) public _value?: string;
+	@Prop({ mutable: true, reflect: true }) public _value?: StencilUnknown;
 
 	/**
 	 * Defines the whether the clear button should be hidden.
@@ -615,7 +616,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 	}
 
 	@Watch('_value')
-	public validateValue(value?: string): void {
+	public validateValue(value?: StencilUnknown): void {
 		this.controller.validateValue(value);
 		this.oldValue = value;
 		this.updateInputValue(value);
@@ -631,10 +632,10 @@ export class KolSingleSelect implements SingleSelectAPI {
 		this.blockSuggestionMouseOver = false;
 	}
 
-	private updateInputValue(value?: string) {
+	private updateInputValue(value?: StencilUnknown) {
 		if (Array.isArray(this._options)) {
-			const matchedOption = this._options.find((option) => (option as Option<string>).value === value);
-			this._inputValue = matchedOption ? (matchedOption.label as string) : '';
+			const matchedOption = this._options.find((option) => option.value === value);
+			this._inputValue = matchedOption ? String(matchedOption.label) : '';
 		}
 	}
 

diff --git a/packages/components/src/schema/components/single-select.ts b/packages/components/src/schema/components/single-select.ts
@@ -25,7 +25,7 @@ type OptionalProps = {
 	msg: Stringified<MsgPropType>;
 	on: InputTypeOnDefault;
 	placeholder: string;
-	value: string;
+	value: StencilUnknown;
 	hideClearButton: boolean;
 } & PropAccessKey &
 	PropDisabled &