[NumberInput][base-ui] Warn when changing control mode with `useContr…

…olled` (#38757)
mui · Sep 14, 2023 · d4c308a · d4c308a
1 parent 41bdcb7
commit d4c308a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
@@ -270,4 +270,42 @@ describe('useNumberInput', () => {
       expect(handleChange.args[0][1]).to.equal(undefined);
     });
   });
+
+  describe('warnings', () => {
+    it('should warn when switching from uncontrolled to controlled', () => {
+      const handleChange = spy();
+      function NumberInput({ value }: { value?: number }) {
+        const { getInputProps } = useNumberInput({
+          onChange: handleChange,
+          value,
+        });
+
+        return <input {...getInputProps()} />;
+      }
+      const { setProps } = render(<NumberInput />);
+      expect(() => {
+        setProps({ value: 5 });
+      }).to.toErrorDev(
+        'MUI: A component is changing the uncontrolled value state of NumberInput to be controlled',
+      );
+    });
+
+    it('should warn when switching from controlled to uncontrolled', () => {
+      const handleChange = spy();
+      function NumberInput({ value }: { value?: number }) {
+        const { getInputProps } = useNumberInput({
+          onChange: handleChange,
+          value,
+        });
+
+        return <input {...getInputProps()} />;
+      }
+      const { setProps } = render(<NumberInput value={5} />);
+      expect(() => {
+        setProps({ value: undefined });
+      }).to.toErrorDev(
+        'MUI: A component is changing the controlled value state of NumberInput to be uncontrolled',
+      );
+    });
+  });
 });
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
@@ -1,7 +1,11 @@
 'use client';
 import * as React from 'react';
 import MuiError from '@mui/utils/macros/MuiError.macro';
-import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
+import {
+  unstable_useForkRef as useForkRef,
+  unstable_useId as useId,
+  unstable_useControlled as useControlled,
+} from '@mui/utils';
 import { FormControlState, useFormControlContext } from '../FormControl';
 import {
   UseNumberInputParameters,
@@ -81,7 +85,12 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI
   const [focused, setFocused] = React.useState(false);
 
   // the "final" value
-  const [value, setValue] = React.useState(valueProp ?? defaultValueProp);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: 'NumberInput',
+  });
+
   // the (potentially) dirty or invalid input value
   const [dirtyValue, setDirtyValue] = React.useState<string | undefined>(
     value ? String(value) : undefined,