Fix useNumberField to propagate name/placeholder props (#2884)

* Fixed bug where useNumberField was swallowing the name and placeholder props, added support to pass/use select additional props from TextInputDOMProps as well

* Added jest tests for added functionality in useNumberField

* Added back newline/spacing in call to useFormattedTextField

* Addressing PR comments - moved input DOM events into a separate interface, removed support for name prop to useNumberField, updated Storybook/tests

* Addressing PR comments - updated useNumberField.test to include test and code change recommended/provided in PR

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -76,7 +76,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onKeyDown,
     onKeyUp,
     description,
-    errorMessage
+    errorMessage,
+    ...otherProps
   } = props;
 
   let {
@@ -175,6 +176,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   let domProps = filterDOMProps(props);
 
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
+    ...otherProps,
     ...domProps,
     label,
     autoFocus,
@@ -183,6 +185,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     isRequired,
     validationState,
     value: state.inputValue,
+    defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
     'aria-label': props['aria-label'] || null,
     'aria-labelledby': props['aria-labelledby'] || null,

packages/@react-aria/numberfield/test/useNumberField.test.ts

@@ -0,0 +1,95 @@
+import {AriaNumberFieldProps} from '@react-types/numberfield';
+import React from 'react';
+import {renderHook} from '@testing-library/react-hooks';
+import {useLocale} from '@react-aria/i18n';
+import {useNumberField} from '../';
+import {useNumberFieldState} from '@react-stately/numberfield';
+
+describe('useNumberField hook', () => {
+  let ref;
+
+  beforeEach(() => {
+    ref = React.createRef();
+    ref.current = document.createElement('input');
+  });
+
+  let renderNumberFieldHook = (props: AriaNumberFieldProps) => {
+    let {result: stateResult} = renderHook(() => useNumberFieldState({...props, locale: useLocale().locale}));
+    let {result} = renderHook(() => useNumberField(props, stateResult.current, ref));
+    return result.current;
+  };
+
+  describe('should return numberFieldProps', () => {
+    it('with default numberField props if no props are provided', () => {
+      let consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      let {inputProps} = renderNumberFieldHook({});
+      expect(inputProps.type).toBe('text');
+      expect(inputProps.disabled).toBeFalsy();
+      expect(inputProps.readOnly).toBeFalsy();
+      expect(inputProps['aria-invalid']).toBeUndefined();
+      expect(inputProps['aria-required']).toBeNull();
+      expect(inputProps['aria-valuenow']).toBeNull();
+      expect(inputProps['aria-valuetext']).toBeNull();
+      expect(inputProps['aria-valuemin']).toBeNull();
+      expect(inputProps['aria-valuemax']).toBeNull();
+      expect(typeof inputProps.onChange).toBe('function');
+      expect(inputProps.autoFocus).toBeFalsy();
+      expect(consoleWarnSpy).toHaveBeenLastCalledWith('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
+    });
+
+    it('with appropriate props if placeholder is defined', () => {
+      let {inputProps} = renderNumberFieldHook({placeholder: 'Enter value', 'aria-label': 'mandatory label'});
+      expect(inputProps['placeholder']).toBe('Enter value');
+    });
+
+    it('all events are merged into the input element', () => {
+      let onCopy = jest.fn();
+      let onCut = jest.fn();
+      let onPaste = jest.fn();
+      let onCompositionStart = jest.fn();
+      let onCompositionEnd = jest.fn();
+      let onCompositionUpdate = jest.fn();
+      let onSelect = jest.fn();
+      let onBeforeInput = jest.fn();
+      let onInput = jest.fn();
+      let {inputProps} = renderNumberFieldHook({
+        'aria-label': 'mandatory label',
+        onCopy,
+        onCut,
+        onPaste,
+        onCompositionStart,
+        onCompositionEnd,
+        onCompositionUpdate,
+        onSelect,
+        onBeforeInput,
+        onInput
+      });
+      inputProps.onCopy({} as any);
+      expect(onCopy).toHaveBeenCalled();
+      inputProps.onCut({} as any);
+      expect(onCut).toHaveBeenCalled();
+      inputProps.onPaste({} as any);
+      expect(onPaste).toHaveBeenCalled();
+      inputProps.onCompositionStart({} as any);
+      expect(onCompositionStart).toHaveBeenCalled();
+      inputProps.onCompositionEnd({} as any);
+      expect(onCompositionEnd).toHaveBeenCalled();
+      inputProps.onCompositionUpdate({} as any);
+      expect(onCompositionUpdate).toHaveBeenCalled();
+      inputProps.onSelect({} as any);
+      expect(onSelect).toHaveBeenCalled();
+      inputProps.onBeforeInput({
+        preventDefault: jest.fn(),
+        target: {
+          value: '',
+          selectionStart: 0,
+          selectionEnd: 0,
+          data: ''
+        }
+      } as any);
+      expect(onBeforeInput).toHaveBeenCalled();
+      inputProps.onInput({} as any);
+      expect(onInput).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -228,6 +228,13 @@ storiesOf('NumberField', module)
   .add(
     'focus events',
     () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp')})
+  )
+  .add(
+    'input dom events',
+    () => render({
+      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')
+    })
   );
 
 function render(props: any = {}) {

packages/@react-types/numberfield/src/index.d.ts

@@ -19,6 +19,7 @@ import {
   RangeInputBase, SpectrumLabelableProps,
   StyleProps,
   TextInputBase,
+  TextInputDOMEvents,
   Validation,
   ValueBase
 } from '@react-types/shared';
@@ -31,7 +32,7 @@ export interface NumberFieldProps extends InputBase, Validation, FocusableProps,
   formatOptions?: Intl.NumberFormatOptions
 }
 
-export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps {
+export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents {
   /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel?: string,
   /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */

packages/@react-types/shared/src/dom.d.ts

@@ -66,9 +66,60 @@ export interface FocusableDOMProps extends DOMProps {
   excludeFromTabOrder?: boolean
 }
 
+
+export interface TextInputDOMEvents {
+  // Clipboard events
+  /**
+   * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
+   */
+   onCopy?: ClipboardEventHandler<HTMLInputElement>,
+
+   /**
+    * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
+    */
+   onCut?: ClipboardEventHandler<HTMLInputElement>,
+
+   /**
+    * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
+    */
+   onPaste?: ClipboardEventHandler<HTMLInputElement>,
+
+   // Composition events
+   /**
+    * Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
+    */
+   onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
+
+   /**
+    * Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
+    */
+   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
+
+   /**
+    * Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
+    */
+   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
+
+   // Selection events
+   /**
+    * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
+    */
+   onSelect?: ReactEventHandler<HTMLInputElement>,
+
+   // Input events
+   /**
+    * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
+    */
+   onBeforeInput?: FormEventHandler<HTMLInputElement>,
+   /**
+    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
+    */
+   onInput?: FormEventHandler<HTMLInputElement>
+}
+
 // DOM props that apply to all text inputs
 // Ensure this is synced with useTextField
-export interface TextInputDOMProps extends DOMProps {
+export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
@@ -107,53 +158,5 @@ export interface TextInputDOMProps extends DOMProps {
   /**
    * Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
    */
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search',
-
-  // Clipboard events
-  /**
-   * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
-   */
-  onCopy?: ClipboardEventHandler<HTMLInputElement>,
-
-  /**
-   * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
-   */
-  onCut?: ClipboardEventHandler<HTMLInputElement>,
-
-  /**
-   * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
-   */
-  onPaste?: ClipboardEventHandler<HTMLInputElement>,
-
-  // Composition events
-  /**
-   * Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
-   */
-  onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
-
-  /**
-   * Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
-   */
-  onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
-
-  /**
-   * Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
-   */
-  onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
-
-  // Selection events
-  /**
-   * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
-   */
-  onSelect?: ReactEventHandler<HTMLInputElement>,
-
-  // Input events
-  /**
-   * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
-   */
-  onBeforeInput?: FormEventHandler<HTMLInputElement>,
-  /**
-   * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
-   */
-  onInput?: FormEventHandler<HTMLInputElement>
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
 }