Update ColorField to behave like NumberField (#1654)

Author: snowystinger

packages/@react-aria/color/src/useColorField.ts

@@ -15,11 +15,13 @@ import {ColorFieldState} from '@react-stately/color';
 import {
   HTMLAttributes,
   LabelHTMLAttributes,
-  RefObject
+  RefObject,
+  useCallback
 } from 'react';
 import {mergeProps, useId} from '@react-aria/utils';
+import {useFormattedTextField} from '@react-aria/textfield';
+import {useScrollWheel} from '@react-aria/interactions';
 import {useSpinButton} from '@react-aria/spinbutton';
-import {useTextField} from '@react-aria/textfield';
 
 interface ColorFieldAria {
   /** Props for the label element. */
@@ -46,7 +48,6 @@ export function useColorField(
   let {
     colorValue,
     inputValue,
-    setInputValue,
     commit,
     increment,
     decrement,
@@ -71,25 +72,29 @@ export function useColorField(
     }
   );
 
-  let onWheel = (e) => {
-    if (isDisabled || isReadOnly) {
-      return;
-    }
-    if (e.deltaY < 0) {
+  let onWheel = useCallback((e) => {
+    if (e.deltaY > 0) {
       increment();
-    } else {
+    } else if (e.deltaY < 0) {
       decrement();
     }
+  }, [isReadOnly, isDisabled, decrement, increment]);
+  // If the input isn't supposed to receive input, disable scrolling.
+  let scrollingDisabled = isDisabled || isReadOnly;
+  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);
+
+  let onChange = value => {
+    state.setInputValue(value);
   };
 
-  let {labelProps, inputProps} = useTextField(
+  let {labelProps, inputProps} = useFormattedTextField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
       type: 'text',
       autoComplete: 'off',
-      onChange: setInputValue
-    }), ref);
+      onChange
+    }), state, ref);
 
   return {
     labelProps,
@@ -100,8 +105,7 @@ export function useColorField(
       'aria-valuenow': null,
       'aria-valuetext': null,
       autoCorrect: 'off',
-      onBlur: commit,
-      onWheel
+      onBlur: commit
     })
   };
 }

packages/@react-aria/color/test/useColorField.test.js

@@ -20,6 +20,9 @@ describe('useColorField', function () {
 
   beforeEach(() => {
     ref = React.createRef();
+    ref.current = {};
+    ref.current.addEventListener = () => {};
+    ref.current.removeEventListener = () => {};
   });
 
   let renderColorFieldHook = (props, state = {}) => {
@@ -67,11 +70,6 @@ describe('useColorField', function () {
     expect(inputProps.id).toBeTruthy();
     expect(inputProps['aria-labelledby']).toBe(labelProps.id);
     expect(inputProps['aria-label']).toBeUndefined(); // because label prop is provided instead of aria-label
-    expect(typeof inputProps.onChange).toBe('function');
-    expect(typeof inputProps.onBlur).toBe('function');
-    expect(typeof inputProps.onFocus).toBe('function');
-    expect(typeof inputProps.onKeyDown).toBe('function');
-    expect(typeof inputProps.onWheel).toBe('function');
   });
 
   it('should return prop for invalid', function () {

packages/@react-aria/interactions/src/index.ts

@@ -20,3 +20,4 @@ export * from './useInteractOutside';
 export * from './useKeyboard';
 export * from './useMove';
 export * from './usePress';
+export * from './useScrollWheel';

packages/@react-aria/interactions/src/useScrollWheel.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject, useCallback, useEffect} from 'react';
+import {ScrollEvents} from '@react-types/shared';
+
+export interface ScrollWheelProps extends ScrollEvents {
+  /** Whether the scroll listener should be disabled. */
+  isDisabled?: boolean
+}
+
+// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
+export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement>): void {
+  let {onScroll, isDisabled} = props;
+  let onScrollHandler = useCallback((e) => {
+    // If the ctrlKey is pressed, this is a zoom event, do nothing.
+    if (isDisabled || e.ctrlKey) {
+      return;
+    }
+
+    // stop scrolling the page
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (onScroll) {
+      onScroll({deltaX: e.deltaX, deltaY: e.deltaY});
+    }
+  }, [onScroll, isDisabled]);
+
+  useEffect(() => {
+    let elem = ref.current;
+    elem.addEventListener('wheel', onScrollHandler);
+
+    return () => {
+      elem.removeEventListener('wheel', onScrollHandler);
+    };
+  }, [onScrollHandler, ref]);
+}

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

@@ -18,9 +18,7 @@ import {
   LabelHTMLAttributes,
   RefObject,
   useCallback,
-  useEffect,
   useMemo,
-  useRef,
   useState
 } from 'react';
 // @ts-ignore
@@ -29,12 +27,13 @@ import {isAndroid, isIOS, isIPhone, mergeProps, useId} from '@react-aria/utils';
 import {NumberFieldState} from '@react-stately/numberfield';
 import {TextInputDOMProps} from '@react-types/shared';
 import {useFocus, useFocusWithin} from '@react-aria/interactions';
+import {useFormattedTextField} from '@react-aria/textfield';
 import {
   useMessageFormatter,
   useNumberFormatter
 } from '@react-aria/i18n';
+import {useScrollWheel} from '@react-aria/interactions';
 import {useSpinButton} from '@react-aria/spinbutton';
-import {useTextField} from '@react-aria/textfield';
 
 interface NumberFieldAria {
   /** Props for the label element. */
@@ -49,13 +48,6 @@ interface NumberFieldAria {
   decrementButtonProps: AriaButtonProps
 }
 
-function supportsNativeBeforeInputEvent() {
-  return typeof window !== 'undefined' &&
-    window.InputEvent &&
-    // @ts-ignore
-    typeof InputEvent.prototype.getTargetRanges === 'function';
-}
-
 /**
  * Provides the behavior and accessibility implementation for a number field component.
  * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
@@ -120,14 +112,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});
 
   let onWheel = useCallback((e) => {
-    // If the ctrlKey is pressed, this is a zoom event, do nothing.
-    if (e.ctrlKey) {
-      return;
-    }
-
-    // stop scrolling the page
-    e.preventDefault();
-
     if (e.deltaY > 0) {
       increment();
     } else if (e.deltaY < 0) {
@@ -136,7 +120,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   }, [decrement, increment]);
   // If the input isn't supposed to receive input, disable scrolling.
   let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
-  useScrollWheel({onScroll: onWheel, capture: false, isDisabled: scrollingDisabled}, inputRef);
+  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);
 
   // The inputMode attribute influences the software keyboard that is shown on touch devices.
   // Browsers and operating systems are quite inconsistent about what keys are available, however.
@@ -166,96 +150,11 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   }
 
-  let stateRef = useRef(state);
-  stateRef.current = state;
-
-  // All browsers implement the 'beforeinput' event natively except Firefox
-  // (currently behind a flag as of Firefox 84). React's polyfill does not
-  // run in all cases that the native event fires, e.g. when deleting text.
-  // Use the native event if available so that we can prevent invalid deletions.
-  // We do not attempt to polyfill this in Firefox since it would be very complicated,
-  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
-  useEffect(() => {
-    if (!supportsNativeBeforeInputEvent()) {
-      return;
-    }
-
-    let input = inputRef.current;
-
-    let onBeforeInput = (e: InputEvent) => {
-      let state = stateRef.current;
-
-      // Compute the next value of the input if the event is allowed to proceed.
-      // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-      let nextValue: string;
-      switch (e.inputType) {
-        case 'historyUndo':
-        case 'historyRedo':
-          // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
-          // because presumably the input would have already been validated previously.
-          return;
-        case 'deleteContent':
-        case 'deleteByCut':
-        case 'deleteByDrag':
-          nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
-          break;
-        case 'deleteContentForward':
-          // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
-          // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
-          // or code points may be deleted. However, in our currently supported locales, there are no such cases.
-          // If we support additional locales in the future, this may need to change.
-          nextValue = input.selectionEnd === input.selectionStart
-            ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)
-            : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
-          break;
-        case 'deleteContentBackward':
-          nextValue = input.selectionEnd === input.selectionStart
-            ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
-            : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
-          break;
-        default:
-          if (e.data != null) {
-            nextValue =
-              input.value.slice(0, input.selectionStart) +
-              e.data +
-              input.value.slice(input.selectionEnd);
-          }
-          break;
-      }
-
-      // If we did not compute a value, or the new value is invalid, prevent the event
-      // so that the browser does not update the input text, move the selection, or add to
-      // the undo/redo stack.
-      if (nextValue == null || !state.validate(nextValue)) {
-        e.preventDefault();
-      }
-    };
-
-    input.addEventListener('beforeinput', onBeforeInput, false);
-    return () => {
-      input.removeEventListener('beforeinput', onBeforeInput, false);
-    };
-  }, [inputRef, stateRef]);
-
-  let onBeforeInput = !supportsNativeBeforeInputEvent()
-    ? e => {
-      let nextValue =
-        e.target.value.slice(0, e.target.selectionStart) +
-        e.data +
-        e.target.value.slice(e.target.selectionEnd);
-
-      if (!state.validate(nextValue)) {
-        e.preventDefault();
-      }
-    }
-    : null;
-
   let onChange = value => {
     state.setInputValue(value);
   };
 
-  let compositionStartState = useRef(null);
-  let {labelProps, inputProps: textFieldProps} = useTextField({
+  let {labelProps, inputProps: textFieldProps} = useFormattedTextField({
     label,
     autoFocus,
     isDisabled,
@@ -269,35 +168,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     id: inputId,
     type: 'text', // Can't use type="number" because then we can't have things like $ in the field.
     inputMode,
-    onChange,
-    onBeforeInput,
-    onCompositionStart() {
-      // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
-      // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
-      // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
-      // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
-      // nor would we want to cancel them because the input from the user is incomplete at that point.
-      // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
-      // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
-      // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
-      // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
-      // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
-      // are implemented, there is no other way to prevent composed input.
-      // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
-      let {value, selectionStart, selectionEnd} = inputRef.current;
-      compositionStartState.current = {value, selectionStart, selectionEnd};
-    },
-    onCompositionEnd() {
-      if (!state.validate(inputRef.current.value)) {
-        // Restore the input value in the DOM immediately so we can synchronously update the selection position.
-        // But also update the value in React state as well so it is correct for future updates.
-        let {value, selectionStart, selectionEnd} = compositionStartState.current;
-        inputRef.current.value = value;
-        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
-        state.setInputValue(value);
-      }
-    }
-  }, inputRef);
+    onChange
+  }, state, inputRef);
 
   let inputProps = mergeProps(
     spinButtonProps,
@@ -388,20 +260,3 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrementButtonProps
   };
 }
-
-// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
-function useScrollWheel({onScroll, capture, isDisabled}: {onScroll: (e) => void, capture: boolean, isDisabled: boolean}, ref: RefObject<HTMLElement>) {
-  useEffect(() => {
-    let elem = ref.current;
-
-    if (!isDisabled) {
-      elem.addEventListener('wheel', onScroll, capture);
-    }
-
-    return () => {
-      if (!isDisabled) {
-        elem.removeEventListener('wheel', onScroll, capture);
-      }
-    };
-  }, [onScroll, ref, capture, isDisabled]);
-}

packages/@react-aria/textfield/src/index.ts

@@ -11,3 +11,4 @@
  */
 
 export * from './useTextField';
+export * from './useFormattedTextField';