Skip to content

SingleSelect: Fix prop/state synchronization #7641

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
deleonio merged 1 commit into from
May 6, 2025
Merged

SingleSelect: Fix prop/state synchronization #7641

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions packages/components/src/components/single-select/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export class KolSingleSelect implements SingleSelectAPI {
@Method()
// eslint-disable-next-line @typescript-eslint/require-await
public async getValue(): Promise<StencilUnknown | undefined> {
return this.state._value;
return this._value;
}

@Method()
Expand Down Expand Up @@ -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<string>).value === this.state._value)?.label as string;
this._inputValue = this.state._options.find((option) => (option as Option<string>).value === this._value)?.label as string;
this._filteredOptions = [...this.state._options];
}
this._isOpen = false;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -281,7 +286,7 @@ export class KolSingleSelect implements SingleSelectAPI {
}}
tabIndex={-1}
role="option"
aria-selected={this.state._value === (option as Option<string>).value ? 'true' : undefined}
aria-selected={this._value === (option as Option<string>).value ? 'true' : undefined}
onClick={(event: Event) => {
this.selectOption(option as Option<string>);
this.refInput?.focus();
Expand Down Expand Up @@ -313,7 +318,7 @@ export class KolSingleSelect implements SingleSelectAPI {
name="options"
id={`option-radio-${index}`}
value={(option as Option<string>).value}
checked={this.state._value === (option as Option<string>).value || index === this._focusedOptionIndex}
checked={this._value === (option as Option<string>).value || index === this._focusedOptionIndex}
/>

<label htmlFor={`option-radio-${index}`} class="radio-label">
Expand Down Expand Up @@ -571,7 +576,6 @@ export class KolSingleSelect implements SingleSelectAPI {
_id: `id-${nonce()}`,
_label: '', // ⚠ required
_options: [],
_value: '',
_hideClearButton: false,
};

Expand Down
Loading
⚡