From 2ab5da6d8465198f4b624cc238083fabcb364445 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 27 Oct 2022 19:17:42 +0200
Subject: [PATCH] Allow null selector (#14212)

---
 .../ha-form/compute-initial-ha-form-data.ts   | 12 ++--
 .../ha-selector/ha-selector-area.ts           | 14 ++--
 .../ha-selector/ha-selector-attribute.ts      |  6 +-
 .../ha-selector/ha-selector-config-entry.ts   |  2 +-
 .../ha-selector/ha-selector-device.ts         | 13 ++--
 .../ha-selector/ha-selector-duration.ts       |  2 +-
 .../ha-selector/ha-selector-entity.ts         | 20 ++++--
 .../ha-selector/ha-selector-file.ts           |  2 +-
 .../ha-selector/ha-selector-icon.ts           |  4 +-
 .../ha-selector/ha-selector-location.ts       |  6 +-
 .../ha-selector/ha-selector-number.ts         | 30 ++++----
 .../ha-selector/ha-selector-select.ts         | 26 +++----
 .../ha-selector/ha-selector-state.ts          |  4 +-
 .../ha-selector/ha-selector-target.ts         | 12 ++--
 .../ha-selector/ha-selector-text.ts           |  4 +-
 .../ha-selector/ha-selector-ui-action.ts      |  2 +-
 src/data/selector.ts                          | 68 +++++++++----------
 17 files changed, 121 insertions(+), 106 deletions(-)

diff --git a/src/components/ha-form/compute-initial-ha-form-data.ts b/src/components/ha-form/compute-initial-ha-form-data.ts
index 96c1ae58fb..ebcec7414d 100644
--- a/src/components/ha-form/compute-initial-ha-form-data.ts
+++ b/src/components/ha-form/compute-initial-ha-form-data.ts
@@ -39,11 +39,11 @@ export const computeInitialHaFormData = (
       const selector: Selector = field.selector;
 
       if ("device" in selector) {
-        data[field.name] = selector.device.multiple ? [] : "";
+        data[field.name] = selector.device?.multiple ? [] : "";
       } else if ("entity" in selector) {
-        data[field.name] = selector.entity.multiple ? [] : "";
+        data[field.name] = selector.entity?.multiple ? [] : "";
       } else if ("area" in selector) {
-        data[field.name] = selector.area.multiple ? [] : "";
+        data[field.name] = selector.area?.multiple ? [] : "";
       } else if ("boolean" in selector) {
         data[field.name] = false;
       } else if (
@@ -56,9 +56,9 @@ export const computeInitialHaFormData = (
       ) {
         data[field.name] = "";
       } else if ("number" in selector) {
-        data[field.name] = selector.number.min ?? 0;
+        data[field.name] = selector.number?.min ?? 0;
       } else if ("select" in selector) {
-        if (selector.select.options.length) {
+        if (selector.select?.options.length) {
           data[field.name] = selector.select.options[0][0];
         }
       } else if ("duration" in selector) {
@@ -75,7 +75,7 @@ export const computeInitialHaFormData = (
       } else if ("color_rgb" in selector) {
         data[field.name] = [0, 0, 0];
       } else if ("color_temp" in selector) {
-        data[field.name] = selector.color_temp.min_mireds ?? 153;
+        data[field.name] = selector.color_temp?.min_mireds ?? 153;
       } else if (
         "action" in selector ||
         "media" in selector ||
diff --git a/src/components/ha-selector/ha-selector-area.ts b/src/components/ha-selector/ha-selector-area.ts
index c6f1be6efd..704a36ed2c 100644
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/src/components/ha-selector/ha-selector-area.ts
@@ -55,8 +55,8 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
   protected updated(changedProperties: PropertyValues): void {
     if (
       changedProperties.has("selector") &&
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
+      (this.selector.area?.device?.integration ||
+        this.selector.area?.entity?.integration) &&
       !this._entitySources
     ) {
       fetchEntitySourcesWithCache(this.hass).then((sources) => {
@@ -67,14 +67,14 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
 
   protected render(): TemplateResult {
     if (
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
+      (this.selector.area?.device?.integration ||
+        this.selector.area?.entity?.integration) &&
       !this._entitySources
     ) {
       return html``;
     }
 
-    if (!this.selector.area.multiple) {
+    if (!this.selector.area?.multiple) {
       return html`
         <ha-area-picker
           .hass=${this.hass}
@@ -106,7 +106,7 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterEntities = (entity: HassEntity): boolean => {
-    if (!this.selector.area.entity) {
+    if (!this.selector.area?.entity) {
       return true;
     }
 
@@ -118,7 +118,7 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
   };
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (!this.selector.area.device) {
+    if (!this.selector.area?.device) {
       return true;
     }
 
diff --git a/src/components/ha-selector/ha-selector-attribute.ts b/src/components/ha-selector/ha-selector-attribute.ts
index da06508e2f..da194bdf22 100644
--- a/src/components/ha-selector/ha-selector-attribute.ts
+++ b/src/components/ha-selector/ha-selector-attribute.ts
@@ -30,9 +30,9 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
     return html`
       <ha-entity-attribute-picker
         .hass=${this.hass}
-        .entityId=${this.selector.attribute.entity_id ||
+        .entityId=${this.selector.attribute?.entity_id ||
         this.context?.filter_entity}
-        .hideAttributes=${this.selector.attribute.hide_attributes}
+        .hideAttributes=${this.selector.attribute?.hide_attributes}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}
@@ -49,7 +49,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
       // No need to filter value if no value
       !this.value ||
       // Only adjust value if we used the context
-      this.selector.attribute.entity_id ||
+      this.selector.attribute?.entity_id ||
       // Only check if context has changed
       !changedProps.has("context")
     ) {
diff --git a/src/components/ha-selector/ha-selector-config-entry.ts b/src/components/ha-selector/ha-selector-config-entry.ts
index 85f6823276..50ae91fc91 100644
--- a/src/components/ha-selector/ha-selector-config-entry.ts
+++ b/src/components/ha-selector/ha-selector-config-entry.ts
@@ -28,7 +28,7 @@ export class HaConfigEntrySelector extends LitElement {
       .helper=${this.helper}
       .disabled=${this.disabled}
       .required=${this.required}
-      .integration=${this.selector.config_entry.integration}
+      .integration=${this.selector.config_entry?.integration}
       allow-custom-entity
     ></ha-config-entry-picker>`;
   }
diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts
index bfb0928524..e56808b766 100644
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -53,7 +53,7 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
     super.updated(changedProperties);
     if (
       changedProperties.has("selector") &&
-      this.selector.device.integration &&
+      this.selector.device?.integration &&
       !this._entitySources
     ) {
       fetchEntitySourcesWithCache(this.hass).then((sources) => {
@@ -63,11 +63,11 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
-    if (this.selector.device.integration && !this._entitySources) {
+    if (this.selector.device?.integration && !this._entitySources) {
       return html``;
     }
 
-    if (!this.selector.device.multiple) {
+    if (!this.selector.device?.multiple) {
       return html`
         <ha-device-picker
           .hass=${this.hass}
@@ -75,10 +75,10 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
           .label=${this.label}
           .helper=${this.helper}
           .deviceFilter=${this._filterDevices}
-          .includeDeviceClasses=${this.selector.device.entity?.device_class
+          .includeDeviceClasses=${this.selector.device?.entity?.device_class
             ? [this.selector.device.entity.device_class]
             : undefined}
-          .includeDomains=${this.selector.device.entity?.domain
+          .includeDomains=${this.selector.device?.entity?.domain
             ? [this.selector.device.entity.domain]
             : undefined}
           .disabled=${this.disabled}
@@ -113,6 +113,9 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
         ? this._deviceIntegrationLookup(this._entitySources, this._entities)
         : undefined;
 
+    if (!this.selector.device) {
+      return true;
+    }
     return filterSelectorDevices(
       this.selector.device,
       device,
diff --git a/src/components/ha-selector/ha-selector-duration.ts b/src/components/ha-selector/ha-selector-duration.ts
index a2ad44a5d5..c0b60257fe 100644
--- a/src/components/ha-selector/ha-selector-duration.ts
+++ b/src/components/ha-selector/ha-selector-duration.ts
@@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement {
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
-        ?enableDay=${this.selector.duration.enable_day}
+        ?enableDay=${this.selector.duration?.enable_day}
       ></ha-duration-input>
     `;
   }
diff --git a/src/components/ha-selector/ha-selector-entity.ts b/src/components/ha-selector/ha-selector-entity.ts
index 2c7062171c..b56ecf1723 100644
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@@ -30,14 +30,14 @@ export class HaEntitySelector extends LitElement {
   @property({ type: Boolean }) public required = true;
 
   protected render() {
-    if (!this.selector.entity.multiple) {
+    if (!this.selector.entity?.multiple) {
       return html`<ha-entity-picker
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}
-        .includeEntities=${this.selector.entity.include_entities}
-        .excludeEntities=${this.selector.entity.exclude_entities}
+        .includeEntities=${this.selector.entity?.include_entities}
+        .excludeEntities=${this.selector.entity?.exclude_entities}
         .entityFilter=${this._filterEntities}
         .disabled=${this.disabled}
         .required=${this.required}
@@ -64,7 +64,7 @@ export class HaEntitySelector extends LitElement {
     super.updated(changedProps);
     if (
       changedProps.has("selector") &&
-      this.selector.entity.integration &&
+      this.selector.entity?.integration &&
       !this._entitySources
     ) {
       fetchEntitySourcesWithCache(this.hass).then((sources) => {
@@ -73,8 +73,16 @@ export class HaEntitySelector extends LitElement {
     }
   }
 
-  private _filterEntities = (entity: HassEntity): boolean =>
-    filterSelectorEntities(this.selector.entity, entity, this._entitySources);
+  private _filterEntities = (entity: HassEntity): boolean => {
+    if (!this.selector?.entity) {
+      return true;
+    }
+    return filterSelectorEntities(
+      this.selector.entity,
+      entity,
+      this._entitySources
+    );
+  };
 }
 
 declare global {
diff --git a/src/components/ha-selector/ha-selector-file.ts b/src/components/ha-selector/ha-selector-file.ts
index 589e43cf9d..f46ca12696 100644
--- a/src/components/ha-selector/ha-selector-file.ts
+++ b/src/components/ha-selector/ha-selector-file.ts
@@ -32,7 +32,7 @@ export class HaFileSelector extends LitElement {
     return html`
       <ha-file-upload
         .hass=${this.hass}
-        .accept=${this.selector.file.accept}
+        .accept=${this.selector.file?.accept}
         .icon=${mdiFile}
         .label=${this.label}
         .required=${this.required}
diff --git a/src/components/ha-selector/ha-selector-icon.ts b/src/components/ha-selector/ha-selector-icon.ts
index d4a3fcc98a..e10969fbcb 100644
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -30,8 +30,8 @@ export class HaIconSelector extends LitElement {
         .required=${this.required}
         .disabled=${this.disabled}
         .helper=${this.helper}
-        .fallbackPath=${this.selector.icon.fallbackPath}
-        .placeholder=${this.selector.icon.placeholder}
+        .fallbackPath=${this.selector.icon?.fallbackPath}
+        .placeholder=${this.selector.icon?.placeholder}
         @value-changed=${this._valueChanged}
       ></ha-icon-picker>
     `;
diff --git a/src/components/ha-selector/ha-selector-location.ts b/src/components/ha-selector/ha-selector-location.ts
index 05a2b3b451..b4b0c6524b 100644
--- a/src/components/ha-selector/ha-selector-location.ts
+++ b/src/components/ha-selector/ha-selector-location.ts
@@ -43,7 +43,7 @@ export class HaLocationSelector extends LitElement {
       value?: LocationSelectorValue
     ): MarkerLocation[] => {
       const computedStyles = getComputedStyle(this);
-      const zoneRadiusColor = selector.location.radius
+      const zoneRadiusColor = selector.location?.radius
         ? computedStyles.getPropertyValue("--zone-radius-color") ||
           computedStyles.getPropertyValue("--accent-color")
         : undefined;
@@ -52,10 +52,10 @@ export class HaLocationSelector extends LitElement {
           id: "location",
           latitude: value?.latitude || this.hass.config.latitude,
           longitude: value?.longitude || this.hass.config.longitude,
-          radius: selector.location.radius ? value?.radius || 1000 : undefined,
+          radius: selector.location?.radius ? value?.radius || 1000 : undefined,
           radius_color: zoneRadiusColor,
           icon:
-            selector.location.icon || selector.location.radius
+            selector.location?.icon || selector.location?.radius
               ? "mdi:map-marker-radius"
               : "mdi:map-marker",
           location_editable: true,
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 343490af31..4edf7e2eb2 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -27,7 +27,7 @@ export class HaNumberSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    const isBox = this.selector.number.mode === "box";
+    const isBox = this.selector.number?.mode === "box";
 
     return html`
       <div class="input">
@@ -37,10 +37,10 @@ export class HaNumberSelector extends LitElement {
                 ? html`${this.label}${this.required ? " *" : ""}`
                 : ""}
               <ha-slider
-                .min=${this.selector.number.min}
-                .max=${this.selector.number.max}
+                .min=${this.selector.number?.min}
+                .max=${this.selector.number?.max}
                 .value=${this._value}
-                .step=${this.selector.number.step ?? 1}
+                .step=${this.selector.number?.step ?? 1}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 pin
@@ -51,24 +51,26 @@ export class HaNumberSelector extends LitElement {
             `
           : ""}
         <ha-textfield
-          .inputMode=${(this.selector.number.step || 1) % 1 !== 0
+          .inputMode=${(this.selector.number?.step || 1) % 1 !== 0
             ? "decimal"
             : "numeric"}
-          .label=${this.selector.number.mode !== "box" ? undefined : this.label}
+          .label=${this.selector.number?.mode !== "box"
+            ? undefined
+            : this.label}
           .placeholder=${this.placeholder}
-          class=${classMap({ single: this.selector.number.mode === "box" })}
-          .min=${this.selector.number.min}
-          .max=${this.selector.number.max}
+          class=${classMap({ single: this.selector.number?.mode === "box" })}
+          .min=${this.selector.number?.min}
+          .max=${this.selector.number?.max}
           .value=${this.value ?? ""}
-          .step=${this.selector.number.step ?? 1}
+          .step=${this.selector.number?.step ?? 1}
           helperPersistent
           .helper=${isBox ? this.helper : undefined}
           .disabled=${this.disabled}
           .required=${this.required}
-          .suffix=${this.selector.number.unit_of_measurement}
+          .suffix=${this.selector.number?.unit_of_measurement}
           type="number"
           autoValidate
-          ?no-spinner=${this.selector.number.mode !== "box"}
+          ?no-spinner=${this.selector.number?.mode !== "box"}
           @input=${this._handleInputChange}
         >
         </ha-textfield>
@@ -80,7 +82,7 @@ export class HaNumberSelector extends LitElement {
   }
 
   private get _value() {
-    return this.value ?? (this.selector.number.min || 0);
+    return this.value ?? (this.selector.number?.min || 0);
   }
 
   private _handleInputChange(ev) {
@@ -88,7 +90,7 @@ export class HaNumberSelector extends LitElement {
     const value =
       ev.target.value === "" || isNaN(ev.target.value)
         ? this.required
-          ? this.selector.number.min || 0
+          ? this.selector.number?.min || 0
           : undefined
         : Number(ev.target.value);
     if (this.value === value) {
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index c454d339cd..fddb300c7b 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -9,6 +9,7 @@ import type { HomeAssistant } from "../../types";
 import "../ha-checkbox";
 import "../ha-chip";
 import "../ha-chip-set";
+import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
 import "../ha-radio";
@@ -36,12 +37,13 @@ export class HaSelectSelector extends LitElement {
   private _filter = "";
 
   protected render() {
-    const options = this.selector.select.options.map((option) =>
-      typeof option === "object" ? option : { value: option, label: option }
-    );
+    const options =
+      this.selector.select?.options.map((option) =>
+        typeof option === "object" ? option : { value: option, label: option }
+      ) || [];
 
-    if (!this.selector.select.custom_value && this._mode === "list") {
-      if (!this.selector.select.multiple) {
+    if (!this.selector.select?.custom_value && this._mode === "list") {
+      if (!this.selector.select?.multiple) {
         return html`
           <div>
             ${this.label}
@@ -82,7 +84,7 @@ export class HaSelectSelector extends LitElement {
       `;
     }
 
-    if (this.selector.select.multiple) {
+    if (this.selector.select?.multiple) {
       const value =
         !this.value || this.value === "" ? [] : (this.value as string[]);
 
@@ -123,7 +125,7 @@ export class HaSelectSelector extends LitElement {
       `;
     }
 
-    if (this.selector.select.custom_value) {
+    if (this.selector.select?.custom_value) {
       if (
         this.value !== undefined &&
         !options.find((option) => option.value === this.value)
@@ -178,8 +180,8 @@ export class HaSelectSelector extends LitElement {
 
   private get _mode(): "list" | "dropdown" {
     return (
-      this.selector.select.mode ||
-      (this.selector.select.options.length < 6 ? "list" : "dropdown")
+      this.selector.select?.mode ||
+      ((this.selector.select?.options?.length || 0) < 6 ? "list" : "dropdown")
     );
   }
 
@@ -243,7 +245,7 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
-    if (!this.selector.select.multiple) {
+    if (!this.selector.select?.multiple) {
       fireEvent(this, "value-changed", {
         value: newValue,
       });
@@ -271,14 +273,14 @@ export class HaSelectSelector extends LitElement {
     this._filter = ev?.detail.value || "";
 
     const filteredItems = this.comboBox.items?.filter((item) => {
-      if (this.selector.select.multiple && this.value?.includes(item.value)) {
+      if (this.selector.select?.multiple && this.value?.includes(item.value)) {
         return false;
       }
       const label = item.label || item.value;
       return label.toLowerCase().includes(this._filter?.toLowerCase());
     });
 
-    if (this._filter && this.selector.select.custom_value) {
+    if (this._filter && this.selector.select?.custom_value) {
       filteredItems?.unshift({ label: this._filter, value: this._filter });
     }
 
diff --git a/src/components/ha-selector/ha-selector-state.ts b/src/components/ha-selector/ha-selector-state.ts
index b72b0349bd..a28628ed86 100644
--- a/src/components/ha-selector/ha-selector-state.ts
+++ b/src/components/ha-selector/ha-selector-state.ts
@@ -30,9 +30,9 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
     return html`
       <ha-entity-state-picker
         .hass=${this.hass}
-        .entityId=${this.selector.state.entity_id ||
+        .entityId=${this.selector.state?.entity_id ||
         this.context?.filter_entity}
-        .attribute=${this.selector.state.attribute ||
+        .attribute=${this.selector.state?.attribute ||
         this.context?.filter_attribute}
         .value=${this.value}
         .label=${this.label}
diff --git a/src/components/ha-selector/ha-selector-target.ts b/src/components/ha-selector/ha-selector-target.ts
index 606e8d1702..55f078f6bf 100644
--- a/src/components/ha-selector/ha-selector-target.ts
+++ b/src/components/ha-selector/ha-selector-target.ts
@@ -64,8 +64,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     super.updated(changedProperties);
     if (
       changedProperties.has("selector") &&
-      (this.selector.target.device?.integration ||
-        this.selector.target.entity?.integration) &&
+      (this.selector.target?.device?.integration ||
+        this.selector.target?.entity?.integration) &&
       !this._entitySources
     ) {
       fetchEntitySourcesWithCache(this.hass).then((sources) => {
@@ -76,8 +76,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   protected render(): TemplateResult {
     if (
-      (this.selector.target.device?.integration ||
-        this.selector.target.entity?.integration) &&
+      (this.selector.target?.device?.integration ||
+        this.selector.target?.entity?.integration) &&
       !this._entitySources
     ) {
       return html``;
@@ -94,7 +94,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterEntities = (entity: HassEntity): boolean => {
-    if (!this.selector.target.entity) {
+    if (!this.selector.target?.entity) {
       return true;
     }
 
@@ -106,7 +106,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
   };
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (!this.selector.target.device) {
+    if (!this.selector.target?.device) {
       return true;
     }
 
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index 1f5190dabe..a9d3de47d4 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -39,7 +39,7 @@ export class HaTextSelector extends LitElement {
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
-        .autocomplete=${this.selector.text.autocomplete}
+        .autocomplete=${this.selector.text?.autocomplete}
         spellcheck="false"
         .required=${this.required}
         autogrow
@@ -59,7 +59,7 @@ export class HaTextSelector extends LitElement {
             html`<div style="width: 24px"></div>`
           : this.selector.text?.suffix}
         .required=${this.required}
-        .autocomplete=${this.selector.text.autocomplete}
+        .autocomplete=${this.selector.text?.autocomplete}
       ></ha-textfield>
       ${this.selector.text?.type === "password"
         ? html`<ha-icon-button
diff --git a/src/components/ha-selector/ha-selector-ui-action.ts b/src/components/ha-selector/ha-selector-ui-action.ts
index b9b983c9c5..b2adde969d 100644
--- a/src/components/ha-selector/ha-selector-ui-action.ts
+++ b/src/components/ha-selector/ha-selector-ui-action.ts
@@ -24,7 +24,7 @@ export class HaSelectorUiAction extends LitElement {
         .label=${this.label}
         .hass=${this.hass}
         .config=${this.value}
-        .actions=${this.selector["ui-action"].actions}
+        .actions=${this.selector["ui-action"]?.actions}
         .tooltipText=${this.helper}
         @value-changed=${this._valueChanged}
       ></hui-action-editor>
diff --git a/src/data/selector.ts b/src/data/selector.ts
index c86922162d..061b246695 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -36,26 +36,26 @@ export type Selector =
 
 export interface ActionSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  action: {};
+  action: {} | null;
 }
 
 export interface AddonSelector {
   addon: {
     name?: string;
     slug?: string;
-  };
+  } | null;
 }
 
 export interface SelectorDevice {
-  integration?: DeviceSelector["device"]["integration"];
-  manufacturer?: DeviceSelector["device"]["manufacturer"];
-  model?: DeviceSelector["device"]["model"];
+  integration?: NonNullable<DeviceSelector["device"]>["integration"];
+  manufacturer?: NonNullable<DeviceSelector["device"]>["manufacturer"];
+  model?: NonNullable<DeviceSelector["device"]>["model"];
 }
 
 export interface SelectorEntity {
-  integration?: EntitySelector["entity"]["integration"];
-  domain?: EntitySelector["entity"]["domain"];
-  device_class?: EntitySelector["entity"]["device_class"];
+  integration?: NonNullable<EntitySelector["entity"]>["integration"];
+  domain?: NonNullable<EntitySelector["entity"]>["domain"];
+  device_class?: NonNullable<EntitySelector["entity"]>["device_class"];
 }
 
 export interface AreaSelector {
@@ -63,47 +63,47 @@ export interface AreaSelector {
     entity?: SelectorEntity;
     device?: SelectorDevice;
     multiple?: boolean;
-  };
+  } | null;
 }
 
 export interface AttributeSelector {
   attribute: {
     entity_id?: string;
     hide_attributes?: readonly string[];
-  };
+  } | null;
 }
 
 export interface BooleanSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  boolean: {};
+  boolean: {} | null;
 }
 
 export interface ColorRGBSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  color_rgb: {};
+  color_rgb: {} | null;
 }
 
 export interface ColorTempSelector {
   color_temp: {
     min_mireds?: number;
     max_mireds?: number;
-  };
+  } | null;
 }
 
 export interface ConfigEntrySelector {
   config_entry: {
     integration?: string;
-  };
+  } | null;
 }
 
 export interface DateSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  date: {};
+  date: {} | null;
 }
 
 export interface DateTimeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  datetime: {};
+  datetime: {} | null;
 }
 
 export interface DeviceSelector {
@@ -113,13 +113,13 @@ export interface DeviceSelector {
     model?: string;
     entity?: SelectorEntity;
     multiple?: boolean;
-  };
+  } | null;
 }
 
 export interface DurationSelector {
   duration: {
     enable_day?: boolean;
-  };
+  } | null;
 }
 
 export interface EntitySelector {
@@ -130,24 +130,24 @@ export interface EntitySelector {
     multiple?: boolean;
     include_entities?: string[];
     exclude_entities?: string[];
-  };
+  } | null;
 }
 
 export interface FileSelector {
   file: {
     accept: string;
-  };
+  } | null;
 }
 
 export interface IconSelector {
   icon: {
     placeholder?: string;
     fallbackPath?: string;
-  };
+  } | null;
 }
 
 export interface LocationSelector {
-  location: { radius?: boolean; icon?: string };
+  location: { radius?: boolean; icon?: string } | null;
 }
 
 export interface LocationSelectorValue {
@@ -158,7 +158,7 @@ export interface LocationSelectorValue {
 
 export interface MediaSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  media: {};
+  media: {} | null;
 }
 
 export interface MediaSelectorValue {
@@ -176,7 +176,7 @@ export interface MediaSelectorValue {
 
 export interface NavigationSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  navigation: {};
+  navigation: {} | null;
 }
 
 export interface NumberSelector {
@@ -186,12 +186,12 @@ export interface NumberSelector {
     step?: number;
     mode?: "box" | "slider";
     unit_of_measurement?: string;
-  };
+  } | null;
 }
 
 export interface ObjectSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  object: {};
+  object: {} | null;
 }
 
 export interface SelectOption {
@@ -206,14 +206,14 @@ export interface SelectSelector {
     custom_value?: boolean;
     mode?: "list" | "dropdown";
     options: readonly string[] | readonly SelectOption[];
-  };
+  } | null;
 }
 
 export interface StateSelector {
   state: {
     entity_id?: string;
     attribute?: string;
-  };
+  } | null;
 }
 
 export interface StringSelector {
@@ -235,34 +235,34 @@ export interface StringSelector {
       | "color";
     suffix?: string;
     autocomplete?: string;
-  };
+  } | null;
 }
 
 export interface TargetSelector {
   target: {
     entity?: SelectorEntity;
     device?: SelectorDevice;
-  };
+  } | null;
 }
 
 export interface TemplateSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  template: {};
+  template: {} | null;
 }
 
 export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  theme: {};
+  theme: {} | null;
 }
 export interface TimeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  time: {};
+  time: {} | null;
 }
 
 export interface UiActionSelector {
   "ui-action": {
     actions?: UiAction[];
-  };
+  } | null;
 }
 
 export const filterSelectorDevices = (