fix(NumberInput): ensure controlled value sync for type=number (#20218)

* fix(NumberInput): ensure controlled value sync for type=number

* chore: remove test stories

* chore: remove unused code in stories

---------

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: heloiselui

packages/react/src/components/NumberInput/NumberInput.stories.js

@@ -165,20 +165,6 @@ export const withAILabel = (args) => {
 
 withAILabel.argTypes = { ...sharedArgTypes };
 
-// TODO: for testing. remove before marking ready for review
-const handleOnChange = (event, state) => {
-  console.log(`-------onChange--------`);
-  console.log(event.target);
-  console.log(state?.value);
-  console.log(state?.direction);
-};
-
-// TODO: for testing. remove before marking ready for review
-const handleOnBlur = (event) => {
-  console.log(`--------onBlur--------`);
-  console.log(event.target);
-};
-
 export const WithTypeOfText = (args) => {
   const locale = useDocumentLang();
 
@@ -193,8 +179,6 @@ export const WithTypeOfText = (args) => {
       helperText="Optional helper text."
       {...args}
       locale={locale}
-      onChange={handleOnChange}
-      onBlur={handleOnBlur}
     />
   );
 };
@@ -217,7 +201,6 @@ WithTypeOfText.argTypes = {
   ...sharedArgTypes,
 };
 
-// TODO: for testing, remove before marking ready for review
 export const WithTypeOfTextControlled = (args) => {
   const locale = useDocumentLang();
   const [value, setValue] = useState(NaN);
@@ -236,14 +219,8 @@ export const WithTypeOfTextControlled = (args) => {
         locale={locale}
         value={value}
         onChange={(event, state) => {
-          handleOnChange(event, state);
-          console.log(`setting value to:`);
-          console.log(state.value);
           setValue(state.value);
         }}
-        onBlur={(event) => {
-          handleOnBlur(event);
-        }}
       />
       <button
         type="button"

packages/react/src/components/NumberInput/NumberInput.tsx

@@ -445,15 +445,16 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       [`${prefix}--number__invalid--warning`]: normalizedProps.warn,
     });
 
-    if (
-      controlledValue !== prevControlledValue &&
-      !(isNaN(Number(controlledValue)) === isNaN(Number(prevControlledValue)))
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      setValue(controlledValue!);
-      setPrevControlledValue(controlledValue);
-    }
-
+    useEffect(() => {
+      if (type === 'number' && controlledValue !== undefined) {
+        if (allowEmpty && controlledValue === '') {
+          setValue('');
+        } else {
+          setValue(controlledValue);
+        }
+        setPrevControlledValue(controlledValue);
+      }
+    }, [controlledValue, type, allowEmpty]);
     let ariaDescribedBy: string | undefined = undefined;
     if (normalizedProps.invalid) {
       ariaDescribedBy = normalizedProps.invalidId;

packages/react/src/components/NumberInput/__tests__/NumberInput-test.js

@@ -202,6 +202,33 @@ describe('NumberInput', () => {
     expect(onChange).toHaveBeenCalledTimes(2);
   });
 
+  it('should update when value prop changes externally with type="number"', async () => {
+    const ControlledNumberInput = () => {
+      const [value, setValue] = useState(5);
+      return (
+        <>
+          <NumberInput
+            type="number"
+            label="NumberInput label"
+            id="number-input"
+            value={value}
+            onChange={(e, state) => setValue(state.value)}
+            translateWithId={translateWithId}
+          />
+          <button onClick={() => setValue(10)}>set to 10</button>
+        </>
+      );
+    };
+
+    render(<ControlledNumberInput />);
+
+    const input = screen.getByLabelText('NumberInput label');
+    expect(input).toHaveValue(5);
+
+    await userEvent.click(screen.getByText('set to 10'));
+    expect(input).toHaveValue(10);
+  });
+
   describe('steppers', () => {
     it('should call `onClick` when up or down arrows are clicked', async () => {
       const onClick = jest.fn();