Sync selected icon with selected value in new select component (#17573)

src/components/ha-control-select-menu.ts

@@ -13,6 +13,10 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { debounce } from "../common/util/debounce";
 import { nextRender } from "../common/util/render-status";
+import "./ha-icon";
+import type { HaIcon } from "./ha-icon";
+import "./ha-svg-icon";
+import type { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-control-select-menu")
 export class HaControlSelectMenu extends SelectBase {
@@ -66,9 +70,7 @@ export class HaControlSelectMenu extends SelectBase {
           @touchend=${this.handleRippleDeactivate}
           @touchcancel=${this.handleRippleDeactivate}
         >
-          <div class="icon">
-            <slot name="icon"></slot>
-          </div>
+          ${this.renderIcon()}
           <div class="content">
             <p id="label" class="label">${this.label}</p>
             ${this.selectedText
@@ -84,6 +86,25 @@ export class HaControlSelectMenu extends SelectBase {
     `;
   }
 
+  private renderIcon() {
+    const index = this.mdcFoundation?.getSelectedIndex();
+    const items = this.menuElement?.items ?? [];
+    const item = index != null ? items[index] : undefined;
+    const icon =
+      item?.querySelector("[slot='graphic']") ??
+      (null as HaSvgIcon | HaIcon | null);
+
+    return html`
+      <div class="icon">
+        ${icon && "path" in icon
+          ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
+          : icon && "icon" in icon
+          ? html`<ha-icon .path=${icon.icon}></ha-icon>`
+          : html`<slot name="icon"></slot>`}
+      </div>
+    `;
+  }
+
   protected onFocus() {
     this.handleRippleFocus();
     super.onFocus();

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

@@ -29,7 +29,6 @@ import "../../../components/ha-switch";
 import {
   ClimateEntity,
   ClimateEntityFeature,
-  HvacMode,
   compareClimateHvacModes,
   computeFanModeIcon,
   computeHvacModeIcon,
@@ -176,11 +175,7 @@ class MoreInfoClimate extends LitElement {
             @selected=${this._handleOperationModeChanged}
             @closed=${stopPropagation}
           >
-            <ha-svg-icon
-              slot="icon"
-              .path=${computeHvacModeIcon(stateObj.state as HvacMode) ??
-              mdiThermostat}
-            ></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
             ${stateObj.attributes.hvac_modes
               .concat()
               .sort(compareClimateHvacModes)
@@ -212,9 +207,7 @@ class MoreInfoClimate extends LitElement {
                 >
                   <ha-svg-icon
                     slot="icon"
-                    .path=${stateObj.attributes.preset_mode
-                      ? computePresetModeIcon(stateObj.attributes.preset_mode)
-                      : mdiTuneVariant}
+                    .path=${mdiTuneVariant}
                   ></ha-svg-icon>
                   ${stateObj.attributes.preset_modes!.map(
                     (mode) => html`
@@ -248,12 +241,7 @@ class MoreInfoClimate extends LitElement {
                   @selected=${this._handleFanModeChanged}
                   @closed=${stopPropagation}
                 >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${stateObj.attributes.fan_mode
-                      ? computeFanModeIcon(stateObj.attributes.fan_mode)
-                      : mdiFan}
-                  ></ha-svg-icon>
+                  <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
                   ${stateObj.attributes.fan_modes!.map(
                     (mode) => html`
                       <ha-list-item .value=${mode} graphic="icon">
@@ -286,12 +274,7 @@ class MoreInfoClimate extends LitElement {
                   @selected=${this._handleSwingmodeChanged}
                   @closed=${stopPropagation}
                 >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${stateObj.attributes.swing_mode
-                      ? computeSwingModeIcon(stateObj.attributes.swing_mode)
-                      : haOscillating}
-                  ></ha-svg-icon>
+                  <ha-svg-icon slot="icon" .path=${haOscillating}></ha-svg-icon>
                   ${stateObj.attributes.swing_modes!.map(
                     (mode) => html`
                       <ha-list-item .value=${mode} graphic="icon">

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

@@ -239,12 +239,7 @@ class MoreInfoFan extends LitElement {
                   @selected=${this._handleDirection}
                   @closed=${stopPropagation}
                 >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${this.stateObj.attributes.direction === "reverse"
-                      ? mdiRotateLeft
-                      : mdiRotateRight}
-                  ></ha-svg-icon>
+                  <ha-svg-icon slot="icon" .path=${mdiRotateLeft}></ha-svg-icon>
                   <ha-list-item value="forward" graphic="icon">
                     <ha-svg-icon
                       slot="graphic"
@@ -286,9 +281,7 @@ class MoreInfoFan extends LitElement {
                 >
                   <ha-svg-icon
                     slot="icon"
-                    .path=${this.stateObj.attributes.oscillating
-                      ? haOscillating
-                      : haOscillatingOff}
+                    .path=${haOscillatingOff}
                   ></ha-svg-icon>
                   <ha-list-item value="on" graphic="icon">
                     <ha-svg-icon

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

@@ -135,14 +135,11 @@ class MoreInfoHumidifier extends LitElement {
                   fixedMenuPosition
                   naturalMenuWidth
                   @selected=${this._handleModeChanged}
-                  @action=${this._handleModeChanged}
                   @closed=${stopPropagation}
                 >
                   <ha-svg-icon
                     slot="icon"
-                    .path=${stateObj.attributes.mode
-                      ? computeHumidiferModeIcon(stateObj.attributes.mode)
-                      : mdiTuneVariant}
+                    .path=${mdiTuneVariant}
                   ></ha-svg-icon>
                   ${stateObj.attributes.available_modes!.map(
                     (mode) => html`
@@ -196,6 +193,19 @@ class MoreInfoHumidifier extends LitElement {
     );
   }
 
+  private _handleModeChanged(ev) {
+    const newVal = ev.target.value || null;
+    this._mode = newVal;
+    this._callServiceHelper(
+      this.stateObj!.attributes.mode,
+      newVal,
+      "set_mode",
+      {
+        mode: newVal,
+      }
+    );
+  }
+
   private async _callServiceHelper(
     oldVal: unknown,
     newVal: unknown,
@@ -234,23 +244,6 @@ class MoreInfoHumidifier extends LitElement {
     }
   }
 
-  private _handleModeChanged(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    const index = ev.detail.index;
-    const newVal = this.stateObj!.attributes.available_modes![index];
-    const oldVal = this._mode;
-
-    if (!newVal || oldVal === newVal) return;
-
-    this._mode = newVal;
-    this.hass.callService("humidifier", "set_mode", {
-      entity_id: this.stateObj!.entity_id,
-      mode: newVal,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       moreInfoControlStyle,

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

@@ -7,7 +7,6 @@ import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-list-item";
 import {
-  OperationMode,
   WaterHeaterEntity,
   WaterHeaterEntityFeature,
   compareWaterHeaterOperationMode,
@@ -86,9 +85,7 @@ class MoreInfoWaterHeater extends LitElement {
                 >
                   <ha-svg-icon
                     slot="icon"
-                    .path=${computeOperationModeIcon(
-                      stateObj.state as OperationMode
-                    ) ?? mdiWaterBoiler}
+                    .path=${mdiWaterBoiler}
                   ></ha-svg-icon>
                   ${stateObj.attributes.operation_list
                     .concat()
@@ -121,12 +118,7 @@ class MoreInfoWaterHeater extends LitElement {
                   @selected=${this._handleAwayModeChanged}
                   @closed=${stopPropagation}
                 >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${stateObj.attributes.away_mode === "on"
-                      ? mdiAccountArrowRight
-                      : mdiAccount}
-                  ></ha-svg-icon>
+                  <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
                   <ha-list-item value="on" graphic="icon">
                     <ha-svg-icon
                       slot="graphic"