From e6f5766e46449df8dfc4692b8bc19b6ffd25365c Mon Sep 17 00:00:00 2001
From: Jonathan Quintin <jqlio18@gmail.com>
Date: Wed, 7 Dec 2022 23:06:29 -0500
Subject: [PATCH] fix(number-input): support floating point values (#1555)

Fixes #233, fixes #486, fixes #1554
---
 docs/src/pages/components/NumberInput.svx |  4 ++++
 src/NumberInput/NumberInput.svelte        | 17 +++++++---------
 tests/NumberInput.test.svelte             | 24 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index adc89d66..7c4c7317 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -23,6 +23,10 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
 
+## With step value
+
+<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
+
 ## No value
 
 Set `allowEmpty` to `true` to allow for no value.
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index a622dad7..5b310e15 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -113,16 +113,13 @@
 
   const dispatch = createEventDispatcher();
 
-  function updateValue(direction) {
-    const nextValue = (value += direction * step);
-
-    if (nextValue < min) {
-      value = min;
-    } else if (nextValue > max) {
-      value = max;
+  function updateValue(isIncrementing) {
+    if (isIncrementing) {
+      ref.stepUp();
     } else {
-      value = nextValue;
+      ref.stepDown();
     }
+    value = ref.value;
 
     dispatch("input", value);
     dispatch("change", value);
@@ -235,7 +232,7 @@
             class:bx--number__control-btn="{true}"
             class:down-icon="{true}"
             on:click="{() => {
-              updateValue(-1);
+              updateValue(false);
             }}"
             disabled="{disabled}"
           >
@@ -250,7 +247,7 @@
             class:bx--number__control-btn="{true}"
             class:up-icon="{true}"
             on:click="{() => {
-              updateValue(1);
+              updateValue(true);
             }}"
             disabled="{disabled}"
           >
diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte
index 307fbfba..38949f7a 100644
--- a/tests/NumberInput.test.svelte
+++ b/tests/NumberInput.test.svelte
@@ -16,6 +16,30 @@
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 4 and 20."
+  on:input="{(e) => {
+    console.log({ input: e.detail }); // null | number
+  }}"
+  on:change="{(e) => {
+    console.log({ change: e.detail }); // null | number
+  }}"
+  on:keydown
+  on:keyup
+  on:paste
+/>
+
+<NumberInput
+  disabled
+  light
+  min="{1}"
+  max="{10}"
+  value="{4}"
+  step="{0.1}"
+  label="Clusters"
+  helperText="Clusters provisioned in your region"
+  invalidText="Number must be between 1 and 10."
+  on:input="{(e) => {
+    console.log({ input: e.detail }); // null | number
+  }}"
   on:change="{(e) => {
     console.log(e.detail); // null | number
   }}"