Merge pull request #34313 from callstack-internal/hur/fix-34239

fix: enter key not working
Expensify · Jan 11, 2024 · 2a89886 · 2a89886
2 parents 5901e1c + 864dead
commit 2a89886
Showing 1 changed file with 28 additions and 41 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,6 +1,6 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
-import React, {memo, useCallback, useMemo, useRef} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
 import Icon from '@components/Icon';
@@ -122,50 +122,37 @@ type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoadin
 
 const accessibilityRoles: string[] = Object.values(CONST.ACCESSIBILITY_ROLE);
 
-const KeyboardShortcutComponent = memo(
-    ({isDisabled = false, isLoading = false, onPress = () => {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) => {
-        const isFocused = useRef(false);
-        const activeElementRole = useActiveElementRole();
+function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPress = () => {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) {
+    const isFocused = useIsFocused();
+    const activeElementRole = useActiveElementRole();
 
-        const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ACCESSIBILITY_ROLE.TEXT, [activeElementRole]);
+    const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ACCESSIBILITY_ROLE.TEXT, [activeElementRole]);
 
-        useFocusEffect(
-            useCallback(() => {
-                isFocused.current = true;
-
-                return () => {
-                    isFocused.current = false;
-                };
-            }, []),
-        );
-
-        const keyboardShortcutCallback = useCallback(
-            (event?: GestureResponderEvent | KeyboardEvent) => {
-                if (!validateSubmitShortcut(isDisabled, isLoading, event)) {
-                    return;
-                }
-                onPress();
-            },
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            [isDisabled, isLoading],
-        );
+    const keyboardShortcutCallback = useCallback(
+        (event?: GestureResponderEvent | KeyboardEvent) => {
+            if (!validateSubmitShortcut(isDisabled, isLoading, event)) {
+                return;
+            }
+            onPress();
+        },
+        [isDisabled, isLoading, onPress],
+    );
 
-        const config = useMemo(
-            () => ({
-                isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused.current,
-                shouldBubble: allowBubble,
-                priority: enterKeyEventListenerPriority,
-                shouldPreventDefault: false,
-            }),
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            [shouldDisableEnterShortcut],
-        );
+    const config = useMemo(
+        () => ({
+            isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,
+            shouldBubble: allowBubble,
+            priority: enterKeyEventListenerPriority,
+            shouldPreventDefault: false,
+        }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [shouldDisableEnterShortcut, isFocused],
+    );
 
-        useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, config);
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, config);
 
-        return null;
-    },
-);
+    return null;
+}
 
 KeyboardShortcutComponent.displayName = 'KeyboardShortcutComponent';