Merge pull request #49864 from FitseTLT/fix-enter-key-for-delete-moda…

…l-in-search Fix - Saved search - Unable to delete saved search using Enter key
Expensify · Oct 2, 2024 · 19a137d · 19a137d
2 parents f325244 + bb52fdb
commit 19a137d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git 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
@@ -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
@@ -164,6 +164,7 @@ function ConfirmModal({
                 prompt={prompt}
                 success={success}
                 danger={danger}
+                isVisible={isVisible}
                 shouldDisableConfirmButtonWhenOffline={shouldDisableConfirmButtonWhenOffline}
                 shouldShowCancelButton={shouldShowCancelButton}
                 shouldCenterContent={shouldCenterContent}