breaking(number-input): align change, input events with native input behavior (#1053)

* Closes #1052

* Closes #1050

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  | --                              |
 

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" }
       ],

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
         />

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"];
   },