From 8136e0a74a5b92b7aa5a3e72797a28277d3572d2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 26 Jan 2022 20:09:24 -0800
Subject: [PATCH] breaking(number-input): type value as null or number

Fixes #1039
---
 src/NumberInput/NumberInput.svelte | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index d620cc40..8310703a 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
-   * @event {number} change
+   * @event {null | number} change
    */
 
   /**
@@ -11,10 +11,11 @@
   export let size = undefined;
 
   /**
-   * Specify the input value
-   * @type {number | string}
+   * Specify the input value.
+   * Type `null` denotes "no value"
+   * @type {null | number}
    */
-  export let value = "";
+  export let value = null;
 
   /** Specify the step increment */
   export let step = 1;
@@ -131,17 +132,12 @@
 
   let inputValue = value;
 
-  const normalizeValue = (_value) => {
-    if (_value === undefined || _value === "") return _value;
-    return Number(_value);
-  };
-
   $: dispatch("change", value);
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
-  $: value = normalizeValue(inputValue);
+  $: value = inputValue ? Number(inputValue) : null;
   $: error =
-    invalid || (!allowEmpty && value === "") || value > max || value < min;
+    invalid || (!allowEmpty && value == null) || value > max || value < min;
   $: errorId = `error-${id}`;
   $: ariaLabel =
     $$props["aria-label"] ||
@@ -208,7 +204,7 @@
           max="{max}"
           min="{min}"
           step="{step}"
-          value="{value}"
+          value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
           on:input
@@ -263,7 +259,7 @@
           max="{max}"
           min="{min}"
           step="{step}"
-          value="{value}"
+          value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
           on:input