From d6d1b256f96a6528b4c722112882f94ef8ecc526 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 17:38:24 +0530 Subject: [PATCH 1/6] use usecontrolled --- .../useNumberInput.test.tsx | 36 +++++++++++++++++++ .../unstable_useNumberInput/useNumberInput.ts | 13 +++++-- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index 08c8603dc16c5a..a80f7337e9fbb2 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -270,4 +270,40 @@ describe('useNumberInput', () => { expect(handleChange.args[0][1]).to.equal(undefined); }); }); + + describe('warnings', () => { + it('should warn when switching from uncontrolled to controlled', async () => { + const handleChange = spy(); + function NumberInput({ value }: { value?: number }) { + const { getInputProps } = useNumberInput({ + onChange: handleChange, + }); + + return ; + } + const { setProps } = render(); + expect(() => { + setProps({ value: 5 }); + }).to.toErrorDev( + ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), + ); + }); + + it('should warn when switching from controlled to uncontrolled', async () => { + const handleChange = spy(); + function NumberInput({ value }: { value?: number }) { + const { getInputProps } = useNumberInput({ + onChange: handleChange, + }); + + return ; + } + const { setProps } = render(); + expect(() => { + setProps({ value: undefined }); + }).to.toErrorDev( + ['Warning: A component is changing a controlled input to be uncontrolled'].join('\n'), + ); + }); + }); }); diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts index dd2646f83025e2..8314a22113433f 100644 --- 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( value ? String(value) : undefined, From bee8972f376634286b48cae3d37d663f8a119e11 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 17:40:59 +0530 Subject: [PATCH 2/6] remove async --- .../src/unstable_useNumberInput/useNumberInput.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index a80f7337e9fbb2..0f7831e44d404f 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -272,7 +272,7 @@ describe('useNumberInput', () => { }); describe('warnings', () => { - it('should warn when switching from uncontrolled to controlled', async () => { + it('should warn when switching from uncontrolled to controlled', () => { const handleChange = spy(); function NumberInput({ value }: { value?: number }) { const { getInputProps } = useNumberInput({ @@ -289,7 +289,7 @@ describe('useNumberInput', () => { ); }); - it('should warn when switching from controlled to uncontrolled', async () => { + it('should warn when switching from controlled to uncontrolled', () => { const handleChange = spy(); function NumberInput({ value }: { value?: number }) { const { getInputProps } = useNumberInput({ From 2ef591a46c2508413504dcdea62159ec88973e61 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:10:43 +0530 Subject: [PATCH 3/6] test --- .../useNumberInput.test.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index 0f7831e44d404f..55fc83e70e08d4 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -272,22 +272,22 @@ describe('useNumberInput', () => { }); describe('warnings', () => { - it('should warn when switching from uncontrolled to controlled', () => { - const handleChange = spy(); - function NumberInput({ value }: { value?: number }) { - const { getInputProps } = useNumberInput({ - onChange: handleChange, - }); - - return ; - } - const { setProps } = render(); - expect(() => { - setProps({ value: 5 }); - }).to.toErrorDev( - ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), - ); - }); + // it('should warn when switching from uncontrolled to controlled', () => { + // const handleChange = spy(); + // function NumberInput({ value }: { value?: number }) { + // const { getInputProps } = useNumberInput({ + // onChange: handleChange, + // }); + + // return ; + // } + // const { setProps } = render(); + // expect(() => { + // setProps({ value: 5 }); + // }).to.toErrorDev( + // ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), + // ); + // }); it('should warn when switching from controlled to uncontrolled', () => { const handleChange = spy(); From 9f2fca7fedf5309c8bf1b235b555f3a8f619745d Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:26:46 +0530 Subject: [PATCH 4/6] test --- .../useNumberInput.test.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index 55fc83e70e08d4..ad95759311f2c6 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -271,24 +271,25 @@ describe('useNumberInput', () => { }); }); - describe('warnings', () => { - // it('should warn when switching from uncontrolled to controlled', () => { - // const handleChange = spy(); - // function NumberInput({ value }: { value?: number }) { - // const { getInputProps } = useNumberInput({ - // onChange: handleChange, - // }); - - // return ; - // } - // const { setProps } = render(); - // expect(() => { - // setProps({ value: 5 }); - // }).to.toErrorDev( - // ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), - // ); - // }); + describe('warn - uncontrol to control', () => { + it('should warn when switching from uncontrolled to controlled', () => { + const handleChange = spy(); + function NumberInput({ value }: { value?: number }) { + const { getInputProps } = useNumberInput({ + onChange: handleChange, + }); + return ; + } + const { setProps } = render(); + expect(() => { + setProps({ value: 5 }); + }).to.toErrorDev( + ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), + ); + }); + }); + describe('warn - control to uncontrol', () => { it('should warn when switching from controlled to uncontrolled', () => { const handleChange = spy(); function NumberInput({ value }: { value?: number }) { From 5e57349bf295b6b1981baeb131fb4a24665d1d52 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:40:06 +0530 Subject: [PATCH 5/6] test --- .../src/unstable_useNumberInput/useNumberInput.test.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index ad95759311f2c6..72e9ffbb515ffb 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -277,15 +277,16 @@ describe('useNumberInput', () => { function NumberInput({ value }: { value?: number }) { const { getInputProps } = useNumberInput({ onChange: handleChange, + value, }); - return ; + return ; } const { setProps } = render(); expect(() => { setProps({ value: 5 }); }).to.toErrorDev( - ['Warning: A component is changing an uncontrolled input to be controlled'].join('\n'), + 'MUI: A component is changing the uncontrolled value state of NumberInput to be controlled', ); }); }); From 57a1c1ed2bbf58e6dee7b1b56e0f1fdbd01c62c6 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:52:37 +0530 Subject: [PATCH 6/6] test --- .../unstable_useNumberInput/useNumberInput.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx index 72e9ffbb515ffb..53946ece059bdb 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx @@ -271,7 +271,7 @@ describe('useNumberInput', () => { }); }); - describe('warn - uncontrol to control', () => { + describe('warnings', () => { it('should warn when switching from uncontrolled to controlled', () => { const handleChange = spy(); function NumberInput({ value }: { value?: number }) { @@ -289,22 +289,22 @@ describe('useNumberInput', () => { 'MUI: A component is changing the uncontrolled value state of NumberInput to be controlled', ); }); - }); - describe('warn - control to uncontrol', () => { + it('should warn when switching from controlled to uncontrolled', () => { const handleChange = spy(); function NumberInput({ value }: { value?: number }) { const { getInputProps } = useNumberInput({ onChange: handleChange, + value, }); - return ; + return ; } const { setProps } = render(); expect(() => { setProps({ value: undefined }); }).to.toErrorDev( - ['Warning: A component is changing a controlled input to be uncontrolled'].join('\n'), + 'MUI: A component is changing the controlled value state of NumberInput to be uncontrolled', ); }); });