fix: NumberInput react controlled vs uncontrolled handling (#22139)

devadula-nandan · heloiselui · web-flow · commit 3646d8a10f15 · 2026-05-06T09:25:45.000Z
* fix: number input react controlled vs uncontrolled handling

* refactor: move tests to respective controlled and uncontrolled blocks

* chore: add todo for re-organizing stories for better clarity

* fix: ai-label story

---------

Co-authored-by: Heloise Lui &lt;71858203+heloiselui@users.noreply.github.com&gt;
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -55,6 +55,7 @@ const reusableProps = {
   max: 100000000,
 };
 
+// TODO: Potential opportunity to differentiate between controlled and uncontrolled stories
 export const Default = (args) => {
   const [value, setValue] = React.useState(50);
 
@@ -127,7 +128,7 @@ export const withAILabel = (args) => {
       <NumberInput
         min={reusableProps.min}
         max={reusableProps.max}
-        value={50}
+        defaultValue={50}
         label="NumberInput label"
         helperText="Optional helper text."
         invalidText="Number is not valid"
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -749,7 +749,11 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
               : Number(event.target.value),
           direction: value < event.target.value ? 'up' : 'down',
         };
-        setValue(state.value);
+
+        // Only update internal state if component is uncontrolled
+        if (controlledValue === undefined) {
+          setValue(state.value);
+        }
 
         if (onChange) {
           onChange(event, state);
@@ -833,7 +837,10 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
         };
 
         if (type === 'number') {
-          setValue(state.value);
+          // Only update internal state if component is uncontrolled
+          if (controlledValue === undefined) {
+            setValue(state.value);
+          }
         }
 
         if (type === 'text') {
diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
