Fix opaque response caused by object assign of style

home-assistant · Sep 19, 2023 · 39cf591 · 39cf591
1 parent dfa1a75
commit 39cf591
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
@@ -112,9 +112,7 @@ export class StateBadge extends LitElement {
     const stateObj = this.stateObj;
 
     const iconStyle: { [name: string]: string } = {};
-    const hostStyle: Partial<CSSStyleDeclaration> = {
-      backgroundImage: "",
-    };
+    let backgroundImage = "";
 
     this._showIcon = true;
 
@@ -134,7 +132,7 @@ export class StateBadge extends LitElement {
         if (computeDomain(stateObj.entity_id) === "camera") {
           imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
         }
-        hostStyle.backgroundImage = `url(${imageUrl})`;
+        backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
       } else if (this.color) {
         // Externally provided overriding color wins over state color
@@ -175,12 +173,12 @@ export class StateBadge extends LitElement {
       if (this.hass) {
         imageUrl = this.hass.hassUrl(imageUrl);
       }
-      hostStyle.backgroundImage = `url(${imageUrl})`;
+      backgroundImage = `url(${imageUrl})`;
       this._showIcon = false;
     }
 
     this._iconStyle = iconStyle;
-    Object.assign(this.style, hostStyle);
+    this.style.backgroundImage = backgroundImage;
   }
 
   static get styles(): CSSResultGroup {

diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts
@@ -3,6 +3,7 @@ import "@material/mwc-list/mwc-list";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/state-badge";
@@ -87,7 +88,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
             <ha-list-item
               twoline
               graphic="avatar"
-              class=${entity.attributes.skipped_version ? "skipped" : ""}
+              class=${ifDefined(
+                entity.attributes.skipped_version ? "skipped" : undefined
+              )}
               .entity_id=${entity.entity_id}
               .hasMeta=${!this.narrow}
               @click=${this._openMoreInfo}
@@ -97,9 +100,11 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
-                class=${this.narrow && entity.attributes.in_progress
-                  ? "updating"
-                  : ""}
+                class=${ifDefined(
+                  this.narrow && entity.attributes.in_progress
+                    ? "updating"
+                    : undefined
+                )}
               ></state-badge>
               ${this.narrow && entity.attributes.in_progress
                 ? html`<ha-circular-progress