Merge pull request #33889 from FitseTLT/fix-pressOnEnter-issue-on-button

Fix pressOnEnter of button to be disabled when screen is not focused

src/components/Button/index.tsx

@@ -171,16 +171,16 @@ function Button(
 
     const keyboardShortcutCallback = useCallback(
         (event?: GestureResponderEvent | KeyboardEvent) => {
-            if (!validateSubmitShortcut(isFocused, isDisabled, isLoading, event)) {
+            if (!validateSubmitShortcut(isDisabled, isLoading, event)) {
                 return;
             }
             onPress();
         },
-        [isDisabled, isFocused, isLoading, onPress],
+        [isDisabled, isLoading, onPress],
     );
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, {
-        isActive: pressOnEnter && !shouldDisableEnterShortcut,
+        isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,
         shouldBubble: allowBubble,
         priority: enterKeyEventListenerPriority,
         shouldPreventDefault: false,

src/components/Button/validateSubmitShortcut/index.native.ts

@@ -3,14 +3,13 @@ import type ValidateSubmitShortcut from './types';
 /**
  * Validate if the submit shortcut should be triggered depending on the button state
  *
- * @param isFocused Whether Button is on active screen
  * @param isDisabled Indicates whether the button should be disabled
  * @param isLoading Indicates whether the button should be disabled and in the loading state
  * @return Returns `true` if the shortcut should be triggered
  */
 
-const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading) => {
-    if (!isFocused || isDisabled || isLoading) {
+const validateSubmitShortcut: ValidateSubmitShortcut = (isDisabled, isLoading) => {
+    if (isDisabled || isLoading) {
         return false;
     }
 

src/components/Button/validateSubmitShortcut/index.ts

@@ -3,16 +3,15 @@ import type ValidateSubmitShortcut from './types';
 /**
  * Validate if the submit shortcut should be triggered depending on the button state
  *
- * @param isFocused Whether Button is on active screen
  * @param isDisabled Indicates whether the button should be disabled
  * @param isLoading Indicates whether the button should be disabled and in the loading state
  * @param event Focused input event
  * @returns Returns `true` if the shortcut should be triggered
  */
 
-const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading, event) => {
+const validateSubmitShortcut: ValidateSubmitShortcut = (isDisabled, isLoading, event) => {
     const eventTarget = event?.target as HTMLElement;
-    if (!isFocused || isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
+    if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
         return false;
     }
 

src/components/Button/validateSubmitShortcut/types.ts

@@ -1,5 +1,5 @@
 import type {GestureResponderEvent} from 'react-native';
 
-type ValidateSubmitShortcut = (isFocused: boolean, isDisabled: boolean, isLoading: boolean, event?: GestureResponderEvent | KeyboardEvent) => boolean;
+type ValidateSubmitShortcut = (isDisabled: boolean, isLoading: boolean, event?: GestureResponderEvent | KeyboardEvent) => boolean;
 
 export default ValidateSubmitShortcut;