From f332edc87d12907abe23ec187d07e7c39abead07 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 30 Jan 2023 12:33:45 +0100
Subject: [PATCH] Fixes select input in statistic card editor (#15254)

---
 .../hui-statistic-card-editor.ts              | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts
index 7583d38fde..aa89edb420 100644
--- a/src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts
@@ -90,9 +90,9 @@ export class HuiStatisticCardEditor
     if (!config || !config.period) {
       return config;
     }
-    for (const period of Object.values(periods)) {
+    for (const [periodKey, period] of Object.entries(periods)) {
       if (deepEqual(period, config.period)) {
-        return { ...config, period };
+        return { ...config, period: periodKey };
       }
     }
     return config;
@@ -102,7 +102,7 @@ export class HuiStatisticCardEditor
     (
       entity: string,
       icon: string,
-      periodVal: any,
+      selectedPeriodKey: string | undefined,
       entityState: HassEntity,
       localize: LocalizeFunc,
       metadata?: StatisticsMetaData
@@ -130,22 +130,22 @@ export class HuiStatisticCardEditor
         {
           name: "period",
           required: true,
-          selector: Object.values(periods).includes(periodVal)
-            ? {
-                select: {
-                  multiple: false,
-                  options: Object.entries(periods).map(
-                    ([periodKey, period]) => ({
-                      value: period,
+          selector:
+            selectedPeriodKey &&
+            Object.keys(periods).includes(selectedPeriodKey)
+              ? {
+                  select: {
+                    multiple: false,
+                    options: Object.keys(periods).map((periodKey) => ({
+                      value: periodKey,
                       label:
                         localize(
                           `ui.panel.lovelace.editor.card.statistic.periods.${periodKey}`
                         ) || periodKey,
-                    })
-                  ),
-                },
-              }
-            : { object: {} },
+                    })),
+                  },
+                }
+              : { object: {} },
         },
         {
           type: "grid",
@@ -183,7 +183,7 @@ export class HuiStatisticCardEditor
     const schema = this._schema(
       this._config.entity,
       this._config.icon,
-      data.period,
+      typeof data.period === "string" ? data.period : undefined,
       entityState,
       this.hass.localize,
       this._metadata
@@ -212,6 +212,14 @@ export class HuiStatisticCardEditor
   private async _valueChanged(ev: CustomEvent) {
     const config = ev.detail.value as StatisticCardConfig;
     Object.keys(config).forEach((k) => config[k] === "" && delete config[k]);
+
+    if (typeof config.period === "string") {
+      const period = periods[config.period];
+      if (period) {
+        config.period = period;
+      }
+    }
+
     if (
       config.stat_type &&
       config.entity &&
@@ -227,12 +235,14 @@ export class HuiStatisticCardEditor
         config.stat_type = "change";
       }
     }
+
     if (!config.stat_type && config.entity) {
       const metadata = (
         await getStatisticMetadata(this.hass!, [config.entity])
       )?.[0];
       config.stat_type = metadata?.has_sum ? "change" : "mean";
     }
+
     fireEvent(this, "config-changed", { config });
   }