diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 74e91de2b4..c931e4f4fb 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -23,13 +23,13 @@ import { EditorTarget } from "../editor/types"; @customElement("hui-action-editor") export class HuiActionEditor extends LitElement { - @property() public config?: ActionConfig; + @property({ attribute: false }) public config?: ActionConfig; - @property() public label?: string; + @property({ attribute: false }) public label?: string; - @property() public actions?: string[]; + @property({ attribute: false }) public actions?: string[]; - @property() protected hass?: HomeAssistant; + @property({ attribute: false }) protected hass?: HomeAssistant; get _action(): string { return this.config?.action || ""; @@ -55,18 +55,19 @@ export class HuiActionEditor extends LitElement { return html``; } return html` - + ${this.actions.map((action) => { - return html`${action}`; + return html` + ${action} + `; })} @@ -74,9 +75,9 @@ export class HuiActionEditor extends LitElement { ? html` ` : ""} @@ -84,9 +85,9 @@ export class HuiActionEditor extends LitElement { ? html` ` : ""} @@ -94,9 +95,9 @@ export class HuiActionEditor extends LitElement { ? html` Service data can only be entered in the code editor ` @@ -104,20 +105,26 @@ export class HuiActionEditor extends LitElement { `; } - private _valueChanged(ev: Event): void { + private _valueChanged(ev: CustomEvent): void { ev.stopPropagation(); - if (!this.hass) { + if (!this.hass || !ev.detail.item?.itemValue) { return; } + const target = ev.target! as EditorTarget; - if (this[`_${target.configValue}`] === target.value) { + + if (this[`_${target.configValue}`] === ev.detail.item.itemValue) { return; } + if (target.configValue) { const newConfig = target.configValue === "action" - ? { action: target.value } - : { ...this.config!, [target.configValue!]: target.value }; + ? { action: ev.detail.item.itemValue } + : { + ...this.config!, + [target.configValue!]: ev.detail.item.itemValue, + }; fireEvent(this, "value-changed", { value: newConfig }); } }