diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index e4cc705dcec1..007f40e77cf8 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -1,7 +1,5 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@@ -10,7 +8,6 @@ import {
deviceAutomationsEqual,
} from "../../data/device_automation";
import { HomeAssistant } from "../../types";
-import "../ha-paper-dropdown-menu";
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@@ -67,14 +64,12 @@ export abstract class HaDeviceAutomationPicker<
this._createNoAutomation = createNoAutomation;
}
- private get _key() {
- if (
- !this.value ||
- deviceAutomationsEqual(
- this._createNoAutomation(this.deviceId),
- this.value
- )
- ) {
+ private get _value() {
+ if (!this.value) {
+ return "";
+ }
+
+ if (!this._automations.length) {
return NO_AUTOMATION_KEY;
}
@@ -93,42 +88,32 @@ export abstract class HaDeviceAutomationPicker<
if (this._renderEmpty) {
return html``;
}
+ const value = this._value;
return html`
-
-
-
- ${this.NO_AUTOMATION_TEXT}
-
-
- ${this.UNKNOWN_AUTOMATION_TEXT}
-
- ${this._automations.map(
- (automation, idx) => html`
-
- ${this._localizeDeviceAutomation(this.hass, automation)}
-
- `
- )}
-
-
+ ${value === NO_AUTOMATION_KEY
+ ? html`
+ ${this.NO_AUTOMATION_TEXT}
+ `
+ : ""}
+ ${value === UNKNOWN_AUTOMATION_KEY
+ ? html`
+ ${this.UNKNOWN_AUTOMATION_TEXT}
+ `
+ : ""}
+ ${this._automations.map(
+ (automation, idx) => html`
+
+ ${this._localizeDeviceAutomation(this.hass, automation)}
+
+ `
+ )}
+
`;
}
@@ -138,14 +123,6 @@ export abstract class HaDeviceAutomationPicker<
if (changedProps.has("deviceId")) {
this._updateDeviceInfo();
}
-
- // The value has changed, force the listbox to update
- if (changedProps.has("value") || changedProps.has("_renderEmpty")) {
- const listbox = this.shadowRoot!.querySelector("paper-listbox")!;
- if (listbox) {
- listbox._selectSelected(this._key);
- }
- }
}
private async _updateDeviceInfo() {
@@ -168,9 +145,16 @@ export abstract class HaDeviceAutomationPicker<
}
private _automationChanged(ev) {
- if (ev.detail.item.automation) {
- this._setValue(ev.detail.item.automation);
+ const value = ev.target.value;
+ if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+ return;
+ }
+ const [deviceId, idx] = value.split("_");
+ const automation = this._automations[idx];
+ if (automation.device_id !== deviceId) {
+ return;
}
+ this._setValue(automation);
}
private _setValue(automation: T) {
@@ -183,14 +167,9 @@ export abstract class HaDeviceAutomationPicker<
static get styles(): CSSResultGroup {
return css`
- ha-paper-dropdown-menu {
+ mwc-select {
width: 100%;
- }
- paper-listbox {
- min-width: 200px;
- }
- paper-item {
- cursor: pointer;
+ margin-top: 4px;
}
`;
}