issue-2216: setting null to value should reset NumberField to blank (#3709)

* issue-2216: setting null to value should reset NumberField to blank

Author: lishichengyan

packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx

@@ -11,6 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
+import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
@@ -247,6 +248,10 @@ storiesOf('NumberField', module)
       onCopy: action('onCopy'), onCut: action('onCut'), onPaste: action('onPaste'), onCompositionStart: action('onCompositionStart'), onCompositionEnd: action('onCompositionEnd'),
       onCompositionUpdate: action('onCompositionUpdate'), onSelect: action('onSelect'), onBeforeInput: action('onBeforeInput'), onInput: action('onInput')
     })
+  )
+  .add(
+    'reset controlled state to blank with null',
+    () => <NumberFieldControlledStateReset />
   );
 
 function render(props: any = {}) {
@@ -310,6 +315,22 @@ function NumberFieldWithCurrencySelect(props) {
   );
 }
 
+function NumberFieldControlledStateReset() {
+  const [controlledValue, setControlledValue] = useState(12);
+  return (
+    <>
+      <NumberField
+        value={controlledValue}
+        onChange={(value) => setControlledValue(value)} />
+      <Button
+        variant={'primary'}
+        onPress={() => setControlledValue(null)}>
+        Reset
+      </Button>
+    </>
+  );
+}
+
 class ErrorBoundary extends React.Component<{}, {hasError: boolean}> {
   constructor(props) {
     super(props);

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -11,6 +11,7 @@
  */
 
 import {act, fireEvent, render, triggerPress, typeText, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import messages from '../../../@react-aria/numberfield/intl/*';
 import {NumberField} from '../';
@@ -2156,4 +2157,32 @@ describe('NumberField', function () {
       });
     });
   });
+
+  it('can be reset to blank using null', () => {
+    function NumberFieldControlled(props) {
+      let {onChange} = props;
+      let [value, setValue] = useState(10);
+      return (
+        <Provider theme={theme} scale="medium" locale="en-US">
+          <NumberField {...props} label="reset to blank using null" value={value} onChange={value => setValue(value)} />
+          <Button
+            variant={'primary'}
+            onPress={() => chain(setValue(null), onChange())}>
+            Reset
+          </Button>
+        </Provider>
+      );
+    }
+    let resetSpy = jest.fn();
+    let {container, getByText} = render(<NumberFieldControlled onChange={resetSpy} />);
+    container = within(container).queryByRole('group');
+    let textField = container.firstChild;
+    let resetButton = getByText('Reset');
+
+    textField = textField.firstChild;
+    expect(textField).toHaveAttribute('value', '10');
+    triggerPress(resetButton);
+    expect(resetSpy).toHaveBeenCalledTimes(1);
+    expect(textField).toHaveAttribute('value', '');
+  });
 });

packages/@react-stately/numberfield/src/useNumberFieldState.ts

@@ -94,7 +94,7 @@ export function useNumberFieldState(
   let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);
   let formatter = useMemo(() => new NumberFormatter(locale, {...formatOptions, numberingSystem}), [locale, formatOptions, numberingSystem]);
   let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);
-  let format = useCallback((value: number) => isNaN(value) ? '' : formatter.format(value), [formatter]);
+  let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);
 
   let clampStep = !isNaN(step) ? step : 1;
   if (intlOptions.style === 'percent' && isNaN(step)) {