fix(NumberInput): Allow empty input for NumberInput with allowEmpty p…

…rop (#15985) (#16100) * fix(NumberInput): allow empty input when allowEmpty = true (#15985) * fix(NumberInput): add @hollyos to contributors (#15985) * refactor(NumberInput): storybook example default min value updated * test(numberinput): update avt test to match default story --------- Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Apr 16, 2024 · 6236d6e · 6236d6e
1 parent 486c2c6
commit 6236d6e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1479,6 +1479,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "hollyos",
+      "name": "Holly Springsteen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4097509?v=4",
+      "profile": "https://hollyos.com/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -284,6 +284,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/anjaly0606"><img src="https://avatars.githubusercontent.com/u/99959496?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anjaly0606</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anjaly0606" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Jawahars"><img src="https://avatars.githubusercontent.com/u/4353146?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jawahar S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Jawahars" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://hollyos.com/"><img src="https://avatars.githubusercontent.com/u/4097509?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Holly Springsteen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hollyos" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

diff --git a/e2e/components/NumberInput/NumberInput-test.avt.e2e.js b/e2e/components/NumberInput/NumberInput-test.avt.e2e.js
@@ -81,8 +81,8 @@ test.describe('@avt NumberInput', () => {
     await expect(input).toHaveAttribute('data-invalid', 'true');
 
     // Allow setting value under `min`, but should cause input to be invalid
-    await input.fill('-1');
-    await expect(input).toHaveValue('-1');
+    await input.fill('-101');
+    await expect(input).toHaveValue('-101');
     await expect(input).toHaveAttribute('data-invalid', 'true');
   });
 });
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -23,7 +23,7 @@ export const Default = () => {
   return (
     <NumberInput
       id="carbon-number"
-      min={0}
+      min={-100}
       max={100}
       value={50}
       label="NumberInput label"
@@ -38,7 +38,7 @@ export const Playground = (args) => {
   return (
     <NumberInput
       id="carbon-number"
-      min={0}
+      min={-100}
       max={100}
       value={50}
       label="NumberInput label"

diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -238,6 +238,9 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       if (defaultValue !== undefined) {
         return defaultValue;
       }
+      if (allowEmpty) {
+        return '';
+      }
       return 0;
     });
     const [prevControlledValue, setPrevControlledValue] =
@@ -306,7 +309,10 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       }
 
       const state = {
-        value: Number(event.target.value),
+        value:
+          allowEmpty && event.target.value === ''
+            ? ''
+            : Number(event.target.value),
         direction: value < event.target.value ? 'up' : 'down',
       };
       setValue(state.value);
@@ -344,7 +350,10 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           : inputRef.current.stepDown();
 
         const state = {
-          value: Number(inputRef.current.value),
+          value:
+            allowEmpty && inputRef.current.value === ''
+              ? ''
+              : Number(inputRef.current.value),
           direction: direction,
         };
         setValue(state.value);