Merge pull request #27653 from Krishna2323/krishna2323/issue/27182

fix: Refocus issue on address field on delete and cancel
Expensify · Sep 22, 2023 · 28987c4 · 28987c4
2 parents 9ab20c5 + 9514e23
commit 28987c4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
@@ -47,6 +47,7 @@ function HeaderWithBackButton({
     },
     threeDotsMenuItems = [],
     children = null,
+    onModalHide = () => {},
     shouldOverlay = false,
 }) {
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
@@ -138,6 +139,7 @@ function HeaderWithBackButton({
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}
                             anchorPosition={threeDotsAnchorPosition}
+                            onModalHide={onModalHide}
                             shouldOverlay={shouldOverlay}
                         />
                     )}

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
@@ -34,6 +34,9 @@ const propTypes = {
     }),
 
     withoutOverlay: PropTypes.bool,
+
+    /** Function to call on modal hide */
+    onModalHide: PropTypes.func,
 };
 
 const defaultProps = {
@@ -44,6 +47,7 @@ const defaultProps = {
     },
     anchorRef: () => {},
     withoutOverlay: false,
+    onModalHide: () => {},
 };
 
 function PopoverMenu(props) {
@@ -78,6 +82,7 @@ function PopoverMenu(props) {
             isVisible={props.isVisible}
             onModalHide={() => {
                 setFocusedIndex(-1);
+                props.onModalHide();
                 if (selectedItemIndex.current !== null) {
                     props.menuItems[selectedItemIndex.current].onSelected();
                     selectedItemIndex.current = null;

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
@@ -1,5 +1,5 @@
 import React, {useState, useRef} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import Icon from '../Icon';
@@ -46,6 +46,9 @@ const propTypes = {
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
 
+    /** Function to call on modal hide */
+    onModalHide: PropTypes.func,
+
     /** Whether the popover menu should overlay the current view */
     shouldOverlay: PropTypes.bool,
 };
@@ -60,10 +63,11 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    onModalHide: () => {},
     shouldOverlay: false,
 };
 
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onModalHide, shouldOverlay}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();
@@ -73,6 +77,9 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
     };
 
     const hidePopoverMenu = () => {
+        InteractionManager.runAfterInteractions(() => {
+            onModalHide();
+        });
         setPopupMenuVisible(false);
     };
 
@@ -105,6 +112,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
             </View>
             <PopoverMenu
                 onClose={hidePopoverMenu}
+                onPopoverHide={onModalHide}
                 isVisible={isPopupMenuVisible}
                 anchorPosition={anchorPosition}
                 anchorAlignment={anchorAlignment}

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
@@ -1,7 +1,7 @@
 import React, {useMemo, useRef, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {useIsFocused} from '@react-navigation/native';
@@ -166,6 +166,15 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 
+    const focusAddressInput = () => {
+        InteractionManager.runAfterInteractions(() => {
+            if (!textInput.current) {
+                return;
+            }
+            textInput.current.focus();
+        });
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -188,12 +197,14 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                             onSelected: () => setIsDeleteStopModalOpen(true),
                         },
                     ]}
+                    onModalHide={focusAddressInput}
                 />
                 <ConfirmModal
                     title={translate('distance.deleteWaypoint')}
                     isVisible={isDeleteStopModalOpen}
                     onConfirm={deleteStopAndHideModal}
                     onCancel={() => setIsDeleteStopModalOpen(false)}
+                    onModalHide={focusAddressInput}
                     prompt={translate('distance.deleteWaypointConfirmation')}
                     confirmText={translate('common.delete')}
                     cancelText={translate('common.cancel')}