fix: add a timeout on BaseGenericPressable for disabled cursor style

Expensify · May 12, 2023 · 1cf0c12 · 1cf0c12
1 parent 756e9d8
commit 1cf0c12
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 40 deletions.
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, forwardRef} from 'react';
+import React, {useCallback, useEffect, useState, useMemo, forwardRef} from 'react';
 import {Pressable} from 'react-native';
 import _ from 'underscore';
 import Accessibility from '../../../libs/Accessibility';
@@ -63,45 +63,70 @@ const GenericPressable = forwardRef((props, ref) => {
         return props.disabled || shouldBeDisabledByScreenReader;
     }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]);
 
-    const onLongPressHandler = useCallback((event) => {
-        if (isDisabled) {
-            return;
-        }
-        if (!onLongPress) {
-            return;
-        }
-        if (shouldUseHapticsOnLongPress) {
-            HapticFeedback.longPress();
-        }
-        if (ref && ref.current) {
-            ref.current.blur();
-        }
-        onLongPress(event);
-
-        Accessibility.moveAccessibilityFocus(nextFocusRef);
-    }, [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled]);
+    const [shouldUseDisabledCursor, setShouldUseDisabledCursor] = useState(isDisabled);
+
+    const onLongPressHandler = useCallback(
+        (event) => {
+            if (isDisabled) {
+                return;
+            }
+            if (!onLongPress) {
+                return;
+            }
+            if (shouldUseHapticsOnLongPress) {
+                HapticFeedback.longPress();
+            }
+            if (ref && ref.current) {
+                ref.current.blur();
+            }
+            onLongPress(event);
+
+            Accessibility.moveAccessibilityFocus(nextFocusRef);
+        },
+        [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled],
+    );
 
-    const onPressHandler = useCallback((event) => {
-        if (isDisabled) {
-            return;
-        }
-        if (shouldUseHapticsOnPress) {
-            HapticFeedback.press();
-        }
-        if (ref && ref.current) {
-            ref.current.blur();
-        }
-        onPress(event);
+    const onPressHandler = useCallback(
+        (event) => {
+            if (isDisabled) {
+                return;
+            }
+            if (shouldUseHapticsOnPress) {
+                HapticFeedback.press();
+            }
+            if (ref && ref.current) {
+                ref.current.blur();
+            }
+            onPress(event);
+
+            Accessibility.moveAccessibilityFocus(nextFocusRef);
+        },
+        [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled],
+    );
 
-        Accessibility.moveAccessibilityFocus(nextFocusRef);
-    }, [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled]);
+    const onKeyPressHandler = useCallback(
+        (event) => {
+            if (event.key !== 'Enter') {
+                return;
+            }
+            onPressHandler(event);
+        },
+        [onPressHandler],
+    );
 
-    const onKeyPressHandler = useCallback((event) => {
-        if (event.key !== 'Enter') {
-            return;
+    useEffect(() => {
+        let timer = null;
+        if (!isDisabled) {
+            setShouldUseDisabledCursor(false);
+        } else {
+            timer = setTimeout(() => setShouldUseDisabledCursor(true), 1000);
         }
-        onPressHandler(event);
-    }, [onPressHandler]);
+
+        return () => {
+            if (!timer) return;
+            clearTimeout(timer);
+        };
+    }, [isDisabled]);
 
     useEffect(() => {
         if (!keyboardShortcut) {
@@ -122,7 +147,7 @@ const GenericPressable = forwardRef((props, ref) => {
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             style={(state) => [
-                getCursorStyle(isDisabled, [props.accessibilityRole, props.role].includes('text')),
+                getCursorStyle(shouldUseDisabledCursor, [props.accessibilityRole, props.role].includes('text')),
                 StyleUtils.parseStyleFromFunction(props.style, state),
                 isScreenReaderActive && StyleUtils.parseStyleFromFunction(props.screenReaderActiveStyle, state),
                 state.focused && StyleUtils.parseStyleFromFunction(props.focusStyle, state),

diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
@@ -46,9 +46,11 @@ const PressableWithFeedback = forwardRef((props, ref) => {
                         setDisabled(props.disabled);
                         return;
                     }
-                    onPress.then(() => {
-                        setDisabled(props.disabled);
-                    });
+                    onPress
+                        .then(() => {
+                            setDisabled(props.disabled);
+                        })
+                        .catch(() => setDisabled(props.disabled));
                 });
             }}
         >