Fix for unavailable input-select (#4991)

* Fix for unavailable select

* Update hui-thermostat-card.ts

src/panels/lovelace/cards/hui-entities-card.ts

@@ -190,6 +190,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         overflow: hidden;
       }
 
+      #states > div {
+        position: relative;
+      }
+
       .icon {
         padding: 0px 18px 0px 8px;
       }

src/panels/lovelace/cards/hui-light-card.ts

@@ -29,6 +29,7 @@ import { toggleEntity } from "../common/entity/toggle-entity";
 import { LightCardConfig } from "./types";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { SUPPORT_BRIGHTNESS } from "../../../data/light";
+import { UNAVAILABLE } from "../../../data/entity";
 
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -84,10 +85,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card>
-        ${stateObj.state === "unavailable"
+        ${stateObj.state === UNAVAILABLE
           ? html`
               <hui-unavailable
-                .text="${this.hass.localize("state.default.unavailable")}"
+                .text=${this.hass.localize("state.default.unavailable")}
+                @click=${this._handleMoreInfo}
               ></hui-unavailable>
             `
           : ""}
@@ -233,6 +235,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         display: block;
       }
 
+      hui-unavailable {
+        cursor: pointer;
+      }
+
       ha-card {
         position: relative;
         overflow: hidden;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -34,6 +34,7 @@ import {
 } from "../../../data/climate";
 import { HassEntity } from "home-assistant-js-websocket";
 import { actionHandler } from "../common/directives/action-handler-directive";
+import { UNAVAILABLE } from "../../../data/entity";
 
 const modeIcons: { [mode in HvacMode]: string } = {
   auto: "hass:calendar-repeat",
@@ -208,10 +209,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           [mode]: true,
         })}
       >
-        ${stateObj.state === "unavailable"
+        ${stateObj.state === UNAVAILABLE
           ? html`
               <hui-unavailable
                 .text="${this.hass.localize("state.default.unavailable")}"
+                @click=${this._handleMoreInfo}
               ></hui-unavailable>
             `
           : ""}
@@ -396,6 +398,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         display: block;
       }
 
+      hui-unavailable {
+        cursor: pointer;
+      }
+
       ha-card {
         position: relative;
         overflow: hidden;

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -32,6 +32,8 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { handleAction } from "../common/handle-action";
+import { UNAVAILABLE } from "../../../data/entity";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 @customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
@@ -78,6 +80,14 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
 
     return html`
+      ${stateObj.state === UNAVAILABLE
+        ? html`
+            <hui-unavailable
+              .text=${this.hass.localize("state.default.unavailable")}
+              @click=${this._showMoreInfo}
+            ></hui-unavailable>
+          `
+        : ""}
       <state-badge
         .stateObj=${stateObj}
         .stateColor=${this._config.state_color}
@@ -100,11 +110,13 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         @click=${stopPropagation}
       >
         <paper-listbox slot="dropdown-content">
-          ${stateObj.attributes.options.map(
+          ${stateObj.attributes.options
+            ? stateObj.attributes.options.map(
                 (option) => html`
                   <paper-item>${option}</paper-item>
                 `
-          )}
+              )
+            : ""}
         </paper-listbox>
       </ha-paper-dropdown-menu>
     `;
@@ -126,15 +138,21 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
     }
 
     // Update selected after rendering the items or else it won't work in Firefox
+    if (stateObj.attributes.options) {
       this.shadowRoot!.querySelector(
         "paper-listbox"
       )!.selected = stateObj.attributes.options.indexOf(stateObj.state);
     }
+  }
 
   private _handleAction(ev: ActionHandlerEvent) {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
+  private _showMoreInfo() {
+    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
+  }
+
   static get styles(): CSSResult {
     return css`
       :host {
@@ -157,6 +175,9 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         background: var(--divider-color);
         border-radius: 100%;
       }
+      hui-unavailable {
+        cursor: pointer;
+      }
     `;
   }