From 5d3b37baca5ec4b2a2104858a99da63d57b96567 Mon Sep 17 00:00:00 2001 From: hurali97 Date: Thu, 11 Jan 2024 11:59:56 +0500 Subject: [PATCH 1/3] fix: enter key not working --- src/components/Button/index.tsx | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index f8b820d559b7..8734e032302d 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, {memo, useCallback, useMemo} from 'react'; import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {ActivityIndicator, View} from 'react-native'; import Icon from '@components/Icon'; @@ -124,21 +124,11 @@ 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 isFocused = useIsFocused(); const activeElementRole = useActiveElementRole(); 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)) { @@ -146,19 +136,18 @@ const KeyboardShortcutComponent = memo( } onPress(); }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [isDisabled, isLoading], + [isDisabled, isLoading, onPress], ); const config = useMemo( () => ({ - isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused.current, + isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused, shouldBubble: allowBubble, priority: enterKeyEventListenerPriority, shouldPreventDefault: false, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [shouldDisableEnterShortcut], + [shouldDisableEnterShortcut, isFocused], ); useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, config); From 394a0c1ec5887a6d4ec68fecf1ecb55fad856ccb Mon Sep 17 00:00:00 2001 From: hurali97 Date: Thu, 11 Jan 2024 17:55:49 +0500 Subject: [PATCH 2/3] fix: enter not working when screen is refocused --- src/components/Button/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 8734e032302d..5c7a302c9778 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,6 +1,6 @@ import {useIsFocused} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; -import React, {memo, useCallback, useMemo} 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,8 +122,7 @@ type KeyboardShortcutComponentProps = Pick {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) => { +function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPress = () => {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) { const isFocused = useIsFocused(); const activeElementRole = useActiveElementRole(); @@ -153,8 +152,7 @@ const KeyboardShortcutComponent = memo( useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, config); return null; - }, -); + }; KeyboardShortcutComponent.displayName = 'KeyboardShortcutComponent'; From 864dead0c6a87a66e7ec2cb8e1a61a50bc228d7e Mon Sep 17 00:00:00 2001 From: hurali97 Date: Thu, 11 Jan 2024 18:19:12 +0500 Subject: [PATCH 3/3] fix: lint --- src/components/Button/index.tsx | 54 ++++++++++++++++----------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 5c7a302c9778..5fb134648134 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -123,36 +123,36 @@ type KeyboardShortcutComponentProps = Pick {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) { - const isFocused = useIsFocused(); - const activeElementRole = useActiveElementRole(); - - const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ACCESSIBILITY_ROLE.TEXT, [activeElementRole]); - - const keyboardShortcutCallback = useCallback( - (event?: GestureResponderEvent | KeyboardEvent) => { - if (!validateSubmitShortcut(isDisabled, isLoading, event)) { - return; - } - onPress(); - }, - [isDisabled, isLoading, onPress], - ); + const isFocused = useIsFocused(); + const activeElementRole = useActiveElementRole(); + + const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ACCESSIBILITY_ROLE.TEXT, [activeElementRole]); + + const keyboardShortcutCallback = useCallback( + (event?: GestureResponderEvent | KeyboardEvent) => { + if (!validateSubmitShortcut(isDisabled, isLoading, event)) { + return; + } + onPress(); + }, + [isDisabled, isLoading, onPress], + ); - const config = useMemo( - () => ({ - isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused, - shouldBubble: allowBubble, - priority: enterKeyEventListenerPriority, - shouldPreventDefault: false, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [shouldDisableEnterShortcut, isFocused], - ); + 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';