From 337e151b2c8f9310deb3df08204c92950b47bce4 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 27 Sep 2024 21:28:44 +0300
Subject: [PATCH] enable pressOnEnter for buttons in confirm content when the
 modal is visible

---
 src/components/Button/index.tsx   | 19 ++++++++++++++++---
 src/components/ConfirmContent.tsx |  6 ++++++
 src/components/ConfirmModal.tsx   |  1 +
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 6ac0174da466..04607ef1cc7f 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -139,13 +139,24 @@ type ButtonProps = Partial<ChildrenProps> & {
 
     /** Whether button's content should be centered */
     isContentCentered?: boolean;
+
+    /** Whether the Enter keyboard listening is active whether or not the screen that contains the button is focused */
+    isPressOnEnterActive?: boolean;
 };
 
-type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
+type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
 
 const accessibilityRoles: string[] = Object.values(CONST.ROLE);
 
-function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPress = () => {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) {
+function KeyboardShortcutComponent({
+    isDisabled = false,
+    isLoading = false,
+    onPress = () => {},
+    pressOnEnter,
+    allowBubble,
+    enterKeyEventListenerPriority,
+    isPressOnEnterActive = false,
+}: KeyboardShortcutComponentProps) {
     const isFocused = useIsFocused();
     const activeElementRole = useActiveElementRole();
 
@@ -163,7 +174,7 @@ function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPre
 
     const config = useMemo(
         () => ({
-            isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,
+            isActive: pressOnEnter && !shouldDisableEnterShortcut && (isFocused || isPressOnEnterActive),
             shouldBubble: allowBubble,
             priority: enterKeyEventListenerPriority,
             shouldPreventDefault: false,
@@ -230,6 +241,7 @@ function Button(
         isSplitButton = false,
         link = false,
         isContentCentered = false,
+        isPressOnEnterActive,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
@@ -329,6 +341,7 @@ function Button(
                     onPress={onPress}
                     pressOnEnter={pressOnEnter}
                     enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                    isPressOnEnterActive={isPressOnEnterActive}
                 />
             )}
             <PressableWithFeedback
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
index 55b1ec5aed3b..bda78b9b320d 100644
--- a/src/components/ConfirmContent.tsx
+++ b/src/components/ConfirmContent.tsx
@@ -95,6 +95,9 @@ type ConfirmContentProps = {
 
     /** Image to display with content */
     image?: IconAsset;
+
+    /** Whether the modal is visibile */
+    isVisible: boolean;
 };
 
 function ConfirmContent({
@@ -123,6 +126,7 @@ function ConfirmContent({
     image,
     titleContainerStyles,
     shouldReverseStackedButtons = false,
+    isVisible,
 }: ConfirmContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -200,6 +204,7 @@ function ConfirmContent({
                             style={shouldReverseStackedButtons ? styles.mt3 : styles.mt4}
                             onPress={onConfirm}
                             pressOnEnter
+                            isPressOnEnterActive={isVisible}
                             large
                             text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
@@ -228,6 +233,7 @@ function ConfirmContent({
                             style={[styles.flex1]}
                             onPress={onConfirm}
                             pressOnEnter
+                            isPressOnEnterActive={isVisible}
                             text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                         />
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index 9d6bd3a0a76a..e63b8bb91874 100755
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -164,6 +164,7 @@ function ConfirmModal({
                 prompt={prompt}
                 success={success}
                 danger={danger}
+                isVisible={isVisible}
                 shouldDisableConfirmButtonWhenOffline={shouldDisableConfirmButtonWhenOffline}
                 shouldShowCancelButton={shouldShowCancelButton}
                 shouldCenterContent={shouldCenterContent}