diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index f8b820d559b7..5fb134648134 100644 --- 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 {}, 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';