Add option to hide clear button in single-select (#7434)

packages/components/src/components/single-select/controller.ts

@@ -50,11 +50,16 @@ export class SingleSelectController extends InputIconController implements Singl
 		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);
 	}
 }

packages/components/src/components/single-select/shadow.tsx

@@ -232,7 +232,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 					<div class="kol-single-select__group">
 						<KolInputStateWrapperFc {...this.getInputProps()} />
 
-						{this._inputValue && (
+						{this._inputValue && !this.state._hideClearButton && (
 							<KolIconTag
 								_icons="codicon codicon-close"
 								_label={translate('kol-delete-selection')}
@@ -504,11 +504,17 @@ export class KolSingleSelect implements SingleSelectAPI {
 	 */
 	@Prop({ mutable: true, reflect: true }) public _value?: string;
 
+	/**
+	 * Defines the whether the clear button should be hidden.
+	 */
+	@Prop() public _hideClearButton?: boolean = false;
+
 	@State() public state: SingleSelectStates = {
 		_hideMsg: false,
 		_id: `id-${nonce()}`,
 		_label: '', // ⚠ required
 		_options: [],
+		_hideClearButton: false,
 	};
 
 	@State() private inputHasFocus = false;
@@ -615,6 +621,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;

packages/components/src/schema/components/single-select.ts

@@ -26,6 +26,7 @@ type OptionalProps = {
 	on: InputTypeOnDefault;
 	placeholder: string;
 	value: string;
+	hideClearButton: boolean;
 } & PropAccessKey &
 	PropDisabled &
 	PropHideMsg &
@@ -46,6 +47,7 @@ type OptionalStates = {
 	icons: KoliBriHorizontalIcons;
 	on: InputTypeOnDefault;
 	placeholder: string;
+	hideClearButton: boolean;
 } & PropAccessKey &
 	PropDisabled &
 	PropHideLabel &

packages/samples/react/src/components/single-select/partials/cases.tsx

@@ -39,6 +39,7 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			<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 long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 };