Add option to hide clear button in single-select

Refs: #7405
public-ui · Feb 28, 2025 · 8faa887 · 8faa887
1 parent 14d988f
commit 8faa887
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/components/src/components/single-select/controller.ts b/packages/components/src/components/single-select/controller.ts
@@ -49,12 +49,15 @@ export class SingleSelectController extends InputIconController implements Singl
 	public validatePlaceholder(value?: string): void {
 		watchString(this.component, '_placeholder', value);
 	}
-
+	public validateHideClearButton(value?: boolean): void {
+		watchBoolean(this.component, '_hideClearButton', value);
+	}
 	public componentWillLoad(): void {
 		super.componentWillLoad();
 		this.validateOptions(this.component._options);
 		this.validateRequired(this.component._required);
 		this.validateValue(this.component._value);
 		this.validatePlaceholder(this.component._placeholder);
+		this.validateHideClearButton(this.component._hideClearButton);
 	}
 }
diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -245,7 +245,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 									}}
 									placeholder={this.state._placeholder}
 								/>
-								{this._inputValue && (
+								{this._inputValue && !this._hideClearButton && (
 									<KolIconTag
 										_icons="codicon codicon-close"
 										_label={translate('kol-delete-selection')}
@@ -552,12 +552,18 @@ export class KolSingleSelect implements SingleSelectAPI {
 	 */
 	@Prop({ mutable: true }) public _value?: string;
 
+	/**
+	 * Defines the value of the input.
+	 */
+	@Prop() public _hideClearButton?: boolean = false;
+
 	@State() public state: SingleSelectStates = {
 		_hideError: false,
 		_id: `id-${nonce()}`,
 		_label: '', // ⚠ required
 		_options: [],
 		_value: '',
+		_hideClearButton: false,
 	};
 
 	@State() private inputHasFocus = false;
@@ -677,6 +683,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 		this.updateInputValue(value);
 	}
 
+	@Watch('_hideClearButton ')
+	public validateHideClearButton(value?: boolean): void {
+		this.controller.validateHideClearButton(value);
+	}
+
 	@Listen('mousemove')
 	public handleMouseEvent() {
 		this.blockSuggestionMouseOver = false;

diff --git a/packages/components/src/schema/components/single-select.ts b/packages/components/src/schema/components/single-select.ts
@@ -27,6 +27,7 @@ type OptionalProps = {
 	placeholder: string;
 	tabIndex: number;
 	value: string;
+	hideClearButton: boolean;
 } & PropAccessKey &
 	PropDisabled &
 	PropHideError &
@@ -50,6 +51,7 @@ type OptionalStates = {
 	on: InputTypeOnDefault;
 	tabIndex: number;
 	placeholder: string;
+	hideClearButton: boolean;
 } & PropAccessKey &
 	PropDisabled &
 	PropHideLabel &

diff --git a/packages/samples/react/src/components/single-select/partials/cases.tsx b/packages/samples/react/src/components/single-select/partials/cases.tsx
@@ -36,6 +36,7 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 });