From d75c6aecbef0721d359cd5f55528e57160bef29c Mon Sep 17 00:00:00 2001
From: Josh McCarty <josh@joshmccarty.com>
Date: Sun, 4 Apr 2021 11:47:08 -0700
Subject: [PATCH] Format input number (#8811)

---
 src/common/entity/compute_state_display.ts             |  8 ++++++--
 .../entity-rows/hui-input-number-entity-row.ts         | 10 +++++++---
 .../lovelace/entity-rows/hui-number-entity-row.ts      |  9 +++++++--
 src/state-summary/state-card-input_number.js           | 10 +++++++++-
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 0ba0c36cb2..d4e77ce4e9 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -68,8 +68,12 @@ export const computeStateDisplay = (
     }
   }
 
-  // `counter` and `number` domains do not have a unit of measurement but should still use `formatNumber`
-  if (domain === "counter" || domain === "number") {
+  // `counter` `number` and `input_number` domains do not have a unit of measurement but should still use `formatNumber`
+  if (
+    domain === "counter" ||
+    domain === "number" ||
+    domain === "input_number"
+  ) {
     return formatNumber(compareState, locale);
   }
 
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
index 344d5d4d06..92583cffbc 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
@@ -10,7 +10,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { formatNumber } from "../../../common/string/format_number";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-slider";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -89,8 +89,12 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                   id="input"
                 ></ha-slider>
                 <span class="state">
-                  ${formatNumber(Number(stateObj.state), this.hass.locale)}
-                  ${stateObj.attributes.unit_of_measurement}
+                  ${computeStateDisplay(
+                    this.hass.localize,
+                    stateObj,
+                    this.hass.locale,
+                    stateObj.state
+                  )}
                 </span>
               </div>
             `
diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
index ac1e7edcc3..40e748ec76 100644
--- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
@@ -19,6 +19,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { EntityConfig, LovelaceRow } from "./types";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-number-entity-row")
 class HuiNumberEntityRow extends LitElement implements LovelaceRow {
@@ -88,8 +89,12 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                   id="input"
                 ></ha-slider>
                 <span class="state">
-                  ${Number(stateObj.state)}
-                  ${stateObj.attributes.unit_of_measurement}
+                  ${computeStateDisplay(
+                    this.hass.localize,
+                    stateObj,
+                    this.hass.locale,
+                    stateObj.state
+                  )}
                 </span>
               </div>
             `
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index f01328fa88..a3c4577118 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -5,6 +5,7 @@ import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 import "../components/entity/state-info";
 import "../components/ha-slider";
 
@@ -75,7 +76,7 @@ class StateCardInputNumber extends mixinBehaviors(
           class="state sliderstate"
           hidden="[[hiddenslider]]"
         >
-          [[value]] [[stateObj.attributes.unit_of_measurement]]
+          [[formattedState]]
         </div>
       </div>
     `;
@@ -138,6 +139,7 @@ class StateCardInputNumber extends mixinBehaviors(
       },
       step: Number,
       value: Number,
+      formattedState: String,
       mode: String,
     };
   }
@@ -159,6 +161,12 @@ class StateCardInputNumber extends mixinBehaviors(
       max: Number(newVal.attributes.max),
       step: Number(newVal.attributes.step),
       value: Number(newVal.state),
+      formattedState: computeStateDisplay(
+        this.hass.localize,
+        newVal,
+        this.hass.locale,
+        newVal.state
+      ),
       mode: String(newVal.attributes.mode),
       maxlength: String(newVal.attributes.max).length,
       hiddenbox: newVal.attributes.mode !== "box",