mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Fixes select selector filter (#14850)
This commit is contained in:
parent
40cf15c1f3
commit
7780ae8f76
@ -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());
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user