Fix for when the value doesnt get changed by the backend when we send it (#9105)

src/data/light.ts

@@ -51,9 +51,7 @@ export const lightSupportsDimming = (entity: LightEntity) =>
     modesSupportingDimming.includes(mode)
   );
 
-export const getLightCurrentModeRgbColor = (
+export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
-  entity: LightEntity
-): number[] | undefined =>
   entity.attributes.color_mode === LightColorModes.RGBWW
     ? entity.attributes.rgbww_color
     : entity.attributes.color_mode === LightColorModes.RGBW

src/dialogs/more-info/controls/more-info-light.ts

@@ -154,7 +154,7 @@ class MoreInfoLight extends LitElement {
                           )}
                           icon="hass:brightness-7"
                           max="100"
-                          .value=${this._colorBrightnessSliderValue ?? 100}
+                          .value=${this._colorBrightnessSliderValue}
                           @change=${this._colorBrightnessSliderChanged}
                           pin
                         ></ha-labeled-slider>`
@@ -282,23 +282,15 @@ class MoreInfoLight extends LitElement {
         stateObj.attributes.color_mode === LightColorModes.RGBWW
           ? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
           : undefined;
-      this._colorBrightnessSliderValue =
+      this._colorBrightnessSliderValue = Math.round(
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
+        (Math.max(...getLightCurrentModeRgbColor(stateObj).slice(0, 3)) * 100) /
-          ? Math.round(
+          255
-              (Math.max(...stateObj.attributes.rgbww_color.slice(0, 3)) * 100) /
+      );
-                255
-            )
-          : stateObj.attributes.color_mode === LightColorModes.RGBW
-          ? Math.round(
-              (Math.max(...stateObj.attributes.rgbw_color.slice(0, 3)) * 100) /
-                255
-            )
-          : undefined;
 
-      this._colorPickerColor = getLightCurrentModeRgbColor(stateObj)?.slice(
+      this._colorPickerColor = getLightCurrentModeRgbColor(stateObj).slice(
         0,
         3
-      ) as [number, number, number] | undefined;
+      ) as [number, number, number];
     } else {
       this._brightnessSliderValue = 0;
     }
@@ -328,6 +320,8 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    this._brightnessSliderValue = bri;
+
     if (this._brightnessAdjusted) {
       const rgb =
         this.stateObj!.attributes.rgb_color ||
@@ -358,6 +352,8 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    this._ctSliderValue = ct;
+
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
       color_temp: ct,
@@ -373,6 +369,14 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    if (name === "wv") {
+      this._wvSliderValue = wv;
+    } else if (name === "cw") {
+      this._cwSliderValue = wv;
+    } else if (name === "ww") {
+      this._wwSliderValue = wv;
+    }
+
     wv = Math.min(255, Math.round((wv * 255) / 100));
 
     const rgb = getLightCurrentModeRgbColor(this.stateObj!);
@@ -406,6 +410,9 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    const oldValue = this._colorBrightnessSliderValue;
+    this._colorBrightnessSliderValue = value;
+
     value = (value * 255) / 100;
 
     const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
@@ -417,12 +424,8 @@ class MoreInfoLight extends LitElement {
     this._setRgbWColor(
       this._adjustColorBrightness(
         // first normalize the value
-        this._colorBrightnessSliderValue
+        oldValue
-          ? this._adjustColorBrightness(
+          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
-              rgb,
-              (this._colorBrightnessSliderValue * 255) / 100,
-              true
-            )
           : rgb,
         value
       )
@@ -488,6 +491,12 @@ class MoreInfoLight extends LitElement {
       rgb: { r: number; g: number; b: number };
     }>
   ) {
+    this._colorPickerColor = [
+      ev.detail.rgb.r,
+      ev.detail.rgb.g,
+      ev.detail.rgb.b,
+    ];
+
     if (
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)

src/dialogs/more-info/more-info-content.ts

@@ -8,7 +8,7 @@ import { stateMoreInfoType } from "./state_more_info_control";
 class MoreInfoContent extends UpdatingElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public stateObj?: HassEntity;
+  @property({ attribute: false }) public stateObj?: HassEntity;
 
   private _detachedChild?: ChildNode;
 
@@ -54,3 +54,9 @@ class MoreInfoContent extends UpdatingElement {
 }
 
 customElements.define("more-info-content", MoreInfoContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-content": MoreInfoContent;
+  }
+}