diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx index e775b01d7a9..747633e033a 100644 --- a/packages/components/src/components/single-select/shadow.tsx +++ b/packages/components/src/components/single-select/shadow.tsx @@ -50,7 +50,7 @@ export class KolSingleSelect implements SingleSelectAPI { @Method() // eslint-disable-next-line @typescript-eslint/require-await public async getValue(): Promise { - return this.state._value; + return this._value; } @Method() @@ -80,9 +80,14 @@ export class KolSingleSelect implements SingleSelectAPI { } }; + /** + * If there are options and the current input value doesn't match any option's label, + * resets the input value to match the label of the currently selected option. + * Closes the dropdown and resets the opened state. + */ private onBlur() { if (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) { - this._inputValue = this.state._options.find((option) => (option as Option).value === this.state._value)?.label as string; + this._inputValue = this.state._options.find((option) => (option as Option).value === this._value)?.label as string; this._filteredOptions = [...this.state._options]; } this._isOpen = false; @@ -110,7 +115,7 @@ export class KolSingleSelect implements SingleSelectAPI { this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value); this._filteredOptions = [...this.state._options]; - this.controller.setFormAssociatedValue(this.state._value); + this.controller.setFormAssociatedValue(this._value); } private onInput(event: Event) { @@ -281,7 +286,7 @@ export class KolSingleSelect implements SingleSelectAPI { }} tabIndex={-1} role="option" - aria-selected={this.state._value === (option as Option).value ? 'true' : undefined} + aria-selected={this._value === (option as Option).value ? 'true' : undefined} onClick={(event: Event) => { this.selectOption(option as Option); this.refInput?.focus(); @@ -313,7 +318,7 @@ export class KolSingleSelect implements SingleSelectAPI { name="options" id={`option-radio-${index}`} value={(option as Option).value} - checked={this.state._value === (option as Option).value || index === this._focusedOptionIndex} + checked={this._value === (option as Option).value || index === this._focusedOptionIndex} />