Fix fan speed for new more info and tile feature (#16050)

src/data/cover.ts

@@ -2,6 +2,7 @@ import {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import { stateActive } from "../common/entity/state_active";
 import { supportsFeature } from "../common/entity/supports-feature";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { UNAVAILABLE } from "./entity";
@@ -114,10 +115,12 @@ export function computeCoverPositionStateDisplay(
   locale: FrontendLocaleData,
   position?: number
 ) {
-  const currentPosition =
-    position ??
-    stateObj.attributes.current_position ??
-    stateObj.attributes.current_tilt_position;
+  const statePosition = stateActive(stateObj)
+    ? stateObj.attributes.current_position ??
+      stateObj.attributes.current_tilt_position
+    : undefined;
+
+  const currentPosition = position ?? statePosition;
 
   return currentPosition && currentPosition !== 100
     ? `${Math.round(currentPosition)}${blankBeforePercent(locale)}%`

src/data/fan.ts

@@ -9,6 +9,7 @@ import {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import { stateActive } from "../common/entity/state_active";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { FrontendLocaleData } from "./translation";
 
@@ -69,7 +70,7 @@ export function fanSpeedToPercentage(
   if (speedValue === -1) {
     return 0;
   }
-  return Math.round(speedValue * step);
+  return Math.floor(speedValue * step);
 }
 
 export function computeFanSpeedCount(stateObj: FanEntity): number {
@@ -99,9 +100,12 @@ export function computeFanSpeedStateDisplay(
   locale: FrontendLocaleData,
   speed?: number
 ) {
-  const currentSpeed = speed ?? stateObj.attributes.percentage;
+  const percentage = stateActive(stateObj)
+    ? stateObj.attributes.percentage
+    : undefined;
+  const currentSpeed = speed ?? percentage;
 
   return currentSpeed
-    ? `${Math.round(currentSpeed)}${blankBeforePercent(locale)}%`
+    ? `${Math.floor(currentSpeed)}${blankBeforePercent(locale)}%`
     : "";
 }

src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
 import { computeStateDisplay } from "../../../../common/entity/compute_state_display";
+import { stateActive } from "../../../../common/entity/state_active";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import "../../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../../components/ha-control-select";
@@ -26,20 +27,25 @@ export class HaMoreInfoFanSpeed extends LitElement {
 
   @property({ attribute: false }) public stateObj!: FanEntity;
 
-  @state() value?: number;
+  @state() sliderValue?: number;
+
+  @state() speedValue?: FanSpeed;
 
   protected updated(changedProp: Map<string | number | symbol, unknown>): void {
     if (changedProp.has("stateObj")) {
-      this.value =
-        this.stateObj.attributes.percentage != null
-          ? Math.max(Math.round(this.stateObj.attributes.percentage), 1)
-          : undefined;
+      const percentage = stateActive(this.stateObj)
+        ? this.stateObj.attributes.percentage ?? 0
+        : 0;
+      this.sliderValue = Math.max(Math.round(percentage), 0);
+      this.speedValue = fanPercentageToSpeed(this.stateObj, percentage);
     }
   }
 
   private _speedValueChanged(ev: CustomEvent) {
     const speed = (ev.detail as any).value as FanSpeed;
 
+    this.speedValue = speed;
+
     const percentage = fanSpeedToPercentage(this.stateObj, speed);
 
     this.hass.callService("fan", "set_percentage", {
@@ -52,6 +58,8 @@ export class HaMoreInfoFanSpeed extends LitElement {
     const value = (ev.detail as any).value;
     if (isNaN(value)) return;
 
+    this.sliderValue = value;
+
     this.hass.callService("fan", "set_percentage", {
       entity_id: this.stateObj!.entity_id,
       percentage: value,
@@ -88,16 +96,11 @@ export class HaMoreInfoFanSpeed extends LitElement {
         })
       ).reverse();
 
-      const speed = fanPercentageToSpeed(
-        this.stateObj,
-        this.stateObj.attributes.percentage ?? 0
-      );
-
       return html`
         <ha-control-select
           vertical
           .options=${options}
-          .value=${speed}
+          .value=${this.speedValue}
           @value-changed=${this._speedValueChanged}
           .ariaLabel=${computeAttributeNameDisplay(
             this.hass.localize,
@@ -119,7 +122,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
         vertical
         min="0"
         max="100"
-        .value=${this.value}
+        .value=${this.sliderValue}
         .step=${this.stateObj.attributes.percentage_step ?? 1}
         @value-changed=${this._valueChanged}
         .ariaLabel=${computeAttributeNameDisplay(

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

@@ -23,6 +23,7 @@ import {
   computeAttributeValueDisplay,
 } from "../../../common/entity/compute_attribute_display";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -119,7 +120,7 @@ class MoreInfoFan extends LitElement {
     const liveValue = this._liveSpeed;
 
     const forcedState =
-      this._liveSpeed != null ? (this._liveSpeed ? "on" : "off") : undefined;
+      liveValue != null ? (liveValue ? "on" : "off") : undefined;
 
     const stateDisplay = computeStateDisplay(
       this.hass.localize,
@@ -135,7 +136,7 @@ class MoreInfoFan extends LitElement {
       liveValue
     );
 
-    if (positionStateDisplay) {
+    if (positionStateDisplay && (stateActive(this.stateObj!) || liveValue)) {
       return positionStateDisplay;
     }
     return stateDisplay;

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

@@ -214,7 +214,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       }
     }
 
-    if (domain === "fan" && stateActive(stateObj)) {
+    if (domain === "fan") {
       const speedStateDisplay = computeFanSpeedStateDisplay(
         stateObj as FanEntity,
         this.hass!.locale
@@ -231,12 +231,11 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       this.hass!.entities
     );
 
-    if (domain === "cover" && stateActive(stateObj)) {
+    if (domain === "cover") {
       const positionStateDisplay = computeCoverPositionStateDisplay(
         stateObj as CoverEntity,
         this.hass!.locale
       );
-
       if (positionStateDisplay) {
         return `${stateDisplay} ⸱ ${positionStateDisplay}`;
       }

src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
@@ -12,6 +13,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import {
   computeFanSpeedCount,
   computeFanSpeedIcon,
+  FanEntity,
   FanEntityFeature,
   fanPercentageToSpeed,
   FanSpeed,
@@ -34,7 +36,7 @@ export const supportsFanSpeedTileFeature = (stateObj: HassEntity) => {
 class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public stateObj?: HassEntity;
+  @property({ attribute: false }) public stateObj?: FanEntity;
 
   @state() private _config?: FanSpeedTileFeatureConfig;
 
@@ -79,6 +81,10 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
 
     const speedCount = computeFanSpeedCount(this.stateObj);
 
+    const percentage = stateActive(this.stateObj)
+      ? this.stateObj.attributes.percentage ?? 0
+      : 0;
+
     if (speedCount <= FAN_SPEED_COUNT_MAX_FOR_BUTTONS) {
       const options = FAN_SPEEDS[speedCount]!.map<ControlSelectOption>(
         (speed) => ({
@@ -88,10 +94,7 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
         })
       );
 
-      const speed = fanPercentageToSpeed(
-        this.stateObj,
-        this.stateObj.attributes.percentage ?? 0
-      );
+      const speed = fanPercentageToSpeed(this.stateObj, percentage);
 
       return html`
         <div class="container">
@@ -113,15 +116,12 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
       `;
     }
 
-    const percentage =
-      this.stateObj.attributes.percentage != null
-        ? Math.max(Math.round(this.stateObj.attributes.percentage), 0)
-        : undefined;
+    const value = Math.max(Math.round(percentage), 0);
 
     return html`
       <div class="container">
         <ha-control-slider
-          .value=${percentage}
+          .value=${value}
           min="0"
           max="100"
           .step=${this.stateObj.attributes.percentage_step ?? 1}