Fixes select selector filter (#14850)

This commit is contained in:
Paul Bottein 2022-12-22 13:03:14 +01:00 committed by GitHub
parent 40cf15c1f3
commit 7780ae8f76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -88,6 +88,10 @@ export class HaSelectSelector extends LitElement {
const value = const value =
!this.value || this.value === "" ? [] : (this.value as string[]); !this.value || this.value === "" ? [] : (this.value as string[]);
const optionItems = options.filter(
(option) => !option.disabled && !value?.includes(option.value)
);
return html` return html`
${value?.length ${value?.length
? html`<ha-chip-set> ? html`<ha-chip-set>
@ -118,13 +122,11 @@ export class HaSelectSelector extends LitElement {
.disabled=${this.disabled} .disabled=${this.disabled}
.required=${this.required && !value.length} .required=${this.required && !value.length}
.value=${this._filter} .value=${this._filter}
.items=${options} .items=${optionItems}
.filteredItems=${options.filter(
(option) => !option.disabled && !value?.includes(option.value)
)}
.allowCustomValue=${this.selector.select.custom_value ?? false} .allowCustomValue=${this.selector.select.custom_value ?? false}
@filter-changed=${this._filterChanged} @filter-changed=${this._filterChanged}
@value-changed=${this._comboBoxValueChanged} @value-changed=${this._comboBoxValueChanged}
@opened-changed=${this._openedChanged}
></ha-combo-box> ></ha-combo-box>
`; `;
} }
@ -132,11 +134,14 @@ export class HaSelectSelector extends LitElement {
if (this.selector.select?.custom_value) { if (this.selector.select?.custom_value) {
if ( if (
this.value !== undefined && this.value !== undefined &&
!Array.isArray(this.value) &&
!options.find((option) => option.value === this.value) !options.find((option) => option.value === this.value)
) { ) {
options.unshift({ value: this.value, label: this.value }); options.unshift({ value: this.value, label: this.value });
} }
const optionItems = options.filter((option) => !option.disabled);
return html` return html`
<ha-combo-box <ha-combo-box
item-value-path="value" item-value-path="value"
@ -146,10 +151,11 @@ export class HaSelectSelector extends LitElement {
.helper=${this.helper} .helper=${this.helper}
.disabled=${this.disabled} .disabled=${this.disabled}
.required=${this.required} .required=${this.required}
.items=${options.filter((item) => !item.disabled)} .items=${optionItems}
.value=${this.value} .value=${this.value}
@filter-changed=${this._filterChanged} @filter-changed=${this._filterChanged}
@value-changed=${this._comboBoxValueChanged} @value-changed=${this._comboBoxValueChanged}
@opened-changed=${this._openedChanged}
></ha-combo-box> ></ha-combo-box>
`; `;
} }
@ -273,13 +279,16 @@ export class HaSelectSelector extends LitElement {
}); });
} }
private _openedChanged(ev?: CustomEvent): void {
if (ev?.detail.value) {
this._filterChanged();
}
}
private _filterChanged(ev?: CustomEvent): void { private _filterChanged(ev?: CustomEvent): void {
this._filter = ev?.detail.value || ""; this._filter = ev?.detail.value || "";
const filteredItems = this.comboBox.items?.filter((item) => { const filteredItems = this.comboBox.items?.filter((item) => {
if (this.selector.select?.multiple && this.value?.includes(item.value)) {
return false;
}
const label = item.label || item.value; const label = item.label || item.value;
return label.toLowerCase().includes(this._filter?.toLowerCase()); return label.toLowerCase().includes(this._filter?.toLowerCase());
}); });