From 099efedef154b9d23b933175836b1b6fee0cc9ca Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Sun, 30 Jan 2022 18:01:51 +0100
Subject: [PATCH] breaking(number-input): align `change`, `input` events with
 native `input` behavior (#1053)

* Closes #1052

* Closes #1050
---
 COMPONENT_INDEX.md                        |  2 +-
 docs/src/COMPONENT_API.json               |  2 +-
 src/NumberInput/NumberInput.svelte        | 34 +++++++++++++++--------
 types/NumberInput/NumberInput.svelte.d.ts |  2 +-
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 7190c229..a17154f1 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2600,11 +2600,11 @@ export type NumberInputTranslationId = "increment" | "decrement";
 | Event name | Type       | Detail                          |
 | :--------- | :--------- | :------------------------------ |
 | change     | dispatched | <code>null &#124; number</code> |
+| input      | dispatched | <code>null &#124; number</code> |
 | click      | forwarded  | --                              |
 | mouseover  | forwarded  | --                              |
 | mouseenter | forwarded  | --                              |
 | mouseleave | forwarded  | --                              |
-| input      | forwarded  | --                              |
 | focus      | forwarded  | --                              |
 | blur       | forwarded  | --                              |
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2b5a1e00..96a991c2 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7247,11 +7247,11 @@
       ],
       "events": [
         { "type": "dispatched", "name": "change", "detail": "null | number" },
+        { "type": "dispatched", "name": "input", "detail": "null | number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "input", "element": "input" },
         { "type": "forwarded", "name": "focus", "element": "input" },
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index a508f062..a7113c97 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -2,6 +2,7 @@
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
    * @event {null | number} change
+   * @event {null | number} input
    */
 
   /**
@@ -128,20 +129,33 @@
     } else {
       value = nextValue;
     }
+
+    dispatch("input", value);
+    dispatch("change", value);
   }
 
-  let inputValue = value;
-
-  $: dispatch("change", value);
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
-  $: value = inputValue != null ? Number(inputValue) : null;
   $: error =
     invalid || (!allowEmpty && value == null) || value > max || value < min;
   $: errorId = `error-${id}`;
   $: ariaLabel =
     $$props["aria-label"] ||
     "Numeric input field with increment and decrement buttons";
+
+  function parse(raw) {
+    return raw != "" ? Number(raw) : null;
+  }
+
+  function onInput({ target }) {
+    value = parse(target.value);
+
+    dispatch("input", value);
+  }
+
+  function onChange({ target }) {
+    dispatch("change", parse(target.value));
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -207,10 +221,8 @@
           value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
+          on:change="{onChange}"
+          on:input="{onInput}"
           on:focus
           on:blur
         />
@@ -262,10 +274,8 @@
           value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
+          on:change="{onChange}"
+          on:input="{onInput}"
           on:focus
           on:blur
         />
diff --git a/types/NumberInput/NumberInput.svelte.d.ts b/types/NumberInput/NumberInput.svelte.d.ts
index 879b3bb1..f7813f13 100644
--- a/types/NumberInput/NumberInput.svelte.d.ts
+++ b/types/NumberInput/NumberInput.svelte.d.ts
@@ -149,11 +149,11 @@ export default class NumberInput extends SvelteComponentTyped<
   NumberInputProps,
   {
     change: CustomEvent<null | number>;
+    input: CustomEvent<null | number>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    input: WindowEventMap["input"];
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
   },