From ebbd308be6c80ba8a9d8e1797e87540231e3990f Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 11 Jan 2019 21:09:53 +0100
Subject: [PATCH] Thermostat: check if we are attached before getting
 clientWidth (#2447)

* We need to be attached to get the cleintWidth

* Use isConnected and set _loaded
---
 .../lovelace/cards/hui-thermostat-card.ts     | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index a8115c190a..ebbc32c96e 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -79,6 +79,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   private _roundSliderStyle?: TemplateResult;
   private _jQuery?: any;
   private _broadCard?: boolean;
+  private _loaded?: boolean;
+  private _updated?: boolean;
 
   static get properties(): PropertyDeclarations {
     return {
@@ -101,6 +103,13 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     this._config = { theme: "default", ...config };
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this._updated && !this._loaded) {
+      this._initialLoad();
+    }
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -157,7 +166,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected firstUpdated(): void {
-    this._initialLoad();
+    this._updated = true;
+    if (this.isConnected && !this._loaded) {
+      this._initialLoad();
+    }
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -190,12 +202,14 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private async _initialLoad(): Promise<void> {
+    this._loaded = true;
+
     const radius = this.clientWidth / 3;
     this._broadCard = this.clientWidth > 390;
 
     (this.shadowRoot!.querySelector(
       "#thermostat"
-    )! as HTMLElement).style.minHeight = radius * 2 + "px";
+    )! as HTMLElement).style.height = radius * 2 + "px";
 
     const loaded = await loadRoundslider();
     await new Promise((resolve) => afterNextRender(resolve));
@@ -220,7 +234,6 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       min: stateObj.attributes.min_temp,
       max: stateObj.attributes.max_temp,
       sliderType: _sliderType,
-      create: () => this._loaded(),
       change: (value) => this._setTemperature(value),
       drag: (value) => this._dragEvent(value),
       value: sliderValue,
@@ -252,12 +265,6 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     return [sliderValue, uiValue];
   }
 
-  private _loaded(): void {
-    (this.shadowRoot!.querySelector(
-      "#thermostat"
-    )! as HTMLElement).style.minHeight = null;
-  }
-
   private _updateSetTemp(value: string): void {
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = value;
   }