Merge pull request #29161 from bernhardoj/fix/22497-prevent-multiple-…

…clicks Fix can't change currency when double click the currency symbol button
Expensify · Oct 10, 2023 · 3ed6713 · 3ed6713
2 parents 034271f + dd12f75
commit 3ed6713
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 17 deletions.
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
@@ -10,6 +10,7 @@ import styles from '../../../styles/styles';
 import genericPressablePropTypes from './PropTypes';
 import CONST from '../../../CONST';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import useSingleExecution from '../../../hooks/useSingleExecution';
 
 /**
  * Returns the cursor style based on the state of Pressable
@@ -44,12 +45,12 @@ const GenericPressable = forwardRef((props, ref) => {
         keyboardShortcut,
         shouldUseAutoHitSlop,
         enableInScreenReaderStates,
-        isExecuting,
         onPressIn,
         onPressOut,
         ...rest
     } = props;
 
+    const {isExecuting, singleExecution} = useSingleExecution();
     const isScreenReaderActive = Accessibility.useScreenReaderStatus();
     const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
 
@@ -63,8 +64,8 @@ const GenericPressable = forwardRef((props, ref) => {
             shouldBeDisabledByScreenReader = isScreenReaderActive;
         }
 
-        return props.disabled || shouldBeDisabledByScreenReader;
-    }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]);
+        return props.disabled || shouldBeDisabledByScreenReader || isExecuting;
+    }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled, isExecuting]);
 
     const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);
 
@@ -134,7 +135,7 @@ const GenericPressable = forwardRef((props, ref) => {
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
             onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
             ref={ref}
-            onPress={!isDisabled ? onPressHandler : undefined}
+            onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
             // In order to prevent haptic feedback, pass empty callback as onLongPress props. Please refer https://github.com/necolas/react-native-web/issues/2349#issuecomment-1195564240
             onLongPress={!isDisabled && onLongPress ? onLongPressHandler : defaultLongPressHandler}
             onKeyPress={!isDisabled ? onKeyPressHandler : undefined}

diff --git a/src/components/Pressable/GenericPressable/PropTypes.js b/src/components/Pressable/GenericPressable/PropTypes.js
@@ -45,9 +45,6 @@ const pressablePropTypes = {
      */
     shouldUseHapticsOnLongPress: PropTypes.bool,
 
-    /** Whether the button is executing */
-    isExecuting: PropTypes.bool,
-
     /**
      * style for when the component is disabled. Can be a function that receives the component's state (active, disabled, hover, focus, pressed, isScreenReaderActive)
      * @default {}
@@ -128,7 +125,6 @@ const defaultProps = {
     keyboardShortcut: undefined,
     shouldUseHapticsOnPress: false,
     shouldUseHapticsOnLongPress: false,
-    isExecuting: false,
     disabledStyle: {},
     hoverStyle: {},
     focusStyle: {},

diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
@@ -5,7 +5,6 @@ import GenericPressable from './GenericPressable';
 import GenericPressablePropTypes from './GenericPressable/PropTypes';
 import OpacityView from '../OpacityView';
 import variables from '../../styles/variables';
-import useSingleExecution from '../../hooks/useSingleExecution';
 
 const omittedProps = ['wrapperStyle', 'needsOffscreenAlphaCompositing'];
 
@@ -43,14 +42,12 @@ const PressableWithFeedbackDefaultProps = {
 
 const PressableWithFeedback = forwardRef((props, ref) => {
     const propsWithoutWrapperProps = _.omit(props, omittedProps);
-    const {isExecuting, singleExecution} = useSingleExecution();
     const [isPressed, setIsPressed] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
-    const isDisabled = props.disabled || isExecuting;
 
     return (
         <OpacityView
-            shouldDim={Boolean(!isDisabled && (isPressed || isHovered))}
+            shouldDim={Boolean(!props.disabled && (isPressed || isHovered))}
             dimmingValue={isPressed ? props.pressDimmingValue : props.hoverDimmingValue}
             style={props.wrapperStyle}
             needsOffscreenAlphaCompositing={props.needsOffscreenAlphaCompositing}
@@ -59,8 +56,7 @@ const PressableWithFeedback = forwardRef((props, ref) => {
                 ref={ref}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...propsWithoutWrapperProps}
-                disabled={isDisabled}
-                isExecuting={isExecuting}
+                disabled={props.disabled}
                 onHoverIn={() => {
                     setIsHovered(true);
                     if (props.onHoverIn) {
@@ -85,9 +81,6 @@ const PressableWithFeedback = forwardRef((props, ref) => {
                         props.onPressOut();
                     }
                 }}
-                onPress={(e) => {
-                    singleExecution(() => props.onPress(e))();
-                }}
             >
                 {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)}
             </GenericPressable>