From d9595b03823b72ea492ac1d0c5ac09f9c2284b1d Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Mon, 18 Sep 2023 15:14:16 +0530 Subject: [PATCH 1/5] fix: Refocus issue on address field on delete and cancel Signed-off-by: Krishna Gupta --- src/components/HeaderWithBackButton/index.js | 2 ++ src/components/PopoverMenu/index.js | 5 +++++ src/components/ThreeDotsMenu/index.js | 12 ++++++++++-- src/pages/iou/WaypointEditor.js | 11 ++++++++++- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index bbf905cc1ac2..b99290918e13 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -47,6 +47,7 @@ function HeaderWithBackButton({ }, threeDotsMenuItems = [], children = null, + onPopoverHide = () => {}, }) { const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState(); const {translate} = useLocalize(); @@ -137,6 +138,7 @@ function HeaderWithBackButton({ menuItems={threeDotsMenuItems} onIconPress={onThreeDotsButtonPress} anchorPosition={threeDotsAnchorPosition} + onPopoverHide={onPopoverHide} /> )} {shouldShowCloseButton && ( diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 5fabf73547ea..1533f329ad4a 100644 --- 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 popover hide */ + onPopoverHide: PropTypes.func, }; const defaultProps = { @@ -44,6 +47,7 @@ const defaultProps = { }, anchorRef: () => {}, withoutOverlay: false, + onPopoverHide: () => {}, }; function PopoverMenu(props) { @@ -78,6 +82,7 @@ function PopoverMenu(props) { isVisible={props.isVisible} onModalHide={() => { setFocusedIndex(-1); + props.onPopoverHide(); 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 index b5637a4f3879..5daeb9669933 100644 --- 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'; @@ -45,6 +45,9 @@ const propTypes = { horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), }), + + /** Function to call on popover hide */ + onPopoverClose: PropTypes.func, }; const defaultProps = { @@ -57,9 +60,10 @@ 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 }, + onPopoverHide: () => {}, }; -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment}) { +function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onPopoverHide}) { const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); const buttonRef = useRef(null); const {translate} = useLocalize(); @@ -69,6 +73,9 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me }; const hidePopoverMenu = () => { + InteractionManager.runAfterInteractions(() => { + onPopoverHide(); + }); setPopupMenuVisible(false); }; @@ -101,6 +108,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me { + InteractionManager.runAfterInteractions(() => { + if (!textInput.current) return; + textInput.current.focus(); + }); + }; + return ( setIsDeleteStopModalOpen(true), }, ]} + onPopoverHide={focus} /> setIsDeleteStopModalOpen(false)} + onModalHide={focus} prompt={translate('distance.deleteWaypointConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} From 0d43181c955938fd331f8592d5221943aaa08e14 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Thu, 21 Sep 2023 08:47:04 +0530 Subject: [PATCH 2/5] fix: lint issues. Signed-off-by: Krishna Gupta --- src/components/HeaderWithBackButton/index.js | 4 ++-- src/components/PopoverMenu/index.js | 6 +++--- src/components/ThreeDotsMenu/index.js | 10 +++++----- src/pages/iou/WaypointEditor.js | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index b99290918e13..26ed6d210b2f 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -47,7 +47,7 @@ function HeaderWithBackButton({ }, threeDotsMenuItems = [], children = null, - onPopoverHide = () => {}, + onModalHide = () => {}, }) { const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState(); const {translate} = useLocalize(); @@ -138,7 +138,7 @@ function HeaderWithBackButton({ menuItems={threeDotsMenuItems} onIconPress={onThreeDotsButtonPress} anchorPosition={threeDotsAnchorPosition} - onPopoverHide={onPopoverHide} + onModalHide={onModalHide} /> )} {shouldShowCloseButton && ( diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 1533f329ad4a..baead6578da9 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -36,7 +36,7 @@ const propTypes = { withoutOverlay: PropTypes.bool, /** Function to call on popover hide */ - onPopoverHide: PropTypes.func, + onModalHide: PropTypes.func, }; const defaultProps = { @@ -47,7 +47,7 @@ const defaultProps = { }, anchorRef: () => {}, withoutOverlay: false, - onPopoverHide: () => {}, + onModalHide: () => {}, }; function PopoverMenu(props) { @@ -82,7 +82,7 @@ function PopoverMenu(props) { isVisible={props.isVisible} onModalHide={() => { setFocusedIndex(-1); - props.onPopoverHide(); + 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 index 5daeb9669933..81d6cbd7b337 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -47,7 +47,7 @@ const propTypes = { }), /** Function to call on popover hide */ - onPopoverClose: PropTypes.func, + onModalHide: PropTypes.func, }; const defaultProps = { @@ -60,10 +60,10 @@ 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 }, - onPopoverHide: () => {}, + onModalHide: () => {}, }; -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onPopoverHide}) { +function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onModalHide}) { const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); const buttonRef = useRef(null); const {translate} = useLocalize(); @@ -74,7 +74,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me const hidePopoverMenu = () => { InteractionManager.runAfterInteractions(() => { - onPopoverHide(); + onModalHide(); }); setPopupMenuVisible(false); }; @@ -108,7 +108,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me setIsDeleteStopModalOpen(true), }, ]} - onPopoverHide={focus} + onModalHide={focus} /> Date: Thu, 21 Sep 2023 08:53:53 +0530 Subject: [PATCH 3/5] fix: minor comment fix. Signed-off-by: Krishna Gupta --- src/components/PopoverMenu/index.js | 2 +- src/components/ThreeDotsMenu/index.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index baead6578da9..74d8c7fa8498 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -35,7 +35,7 @@ const propTypes = { withoutOverlay: PropTypes.bool, - /** Function to call on popover hide */ + /** Function to call on modal hide */ onModalHide: PropTypes.func, }; diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index 218967aa2073..5e22a74fa37e 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -46,7 +46,7 @@ const propTypes = { vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), }), - /** Function to call on popover hide */ + /** Function to call on modal hide */ onModalHide: PropTypes.func, /** Whether the popover menu should overlay the current view */ @@ -67,8 +67,7 @@ const defaultProps = { shouldOverlay: false, }; - -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment,onModalHide, 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(); From 6dd360142723c1725b7a81f59eaafdb31de9bc49 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Thu, 21 Sep 2023 08:55:54 +0530 Subject: [PATCH 4/5] fix: lint issue if statement. Signed-off-by: Krishna Gupta --- src/pages/iou/WaypointEditor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 239cfe33153f..5eb17aac1b50 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -159,7 +159,9 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI const focus = () => { InteractionManager.runAfterInteractions(() => { - if (!textInput.current) return; + if (!textInput.current) { + return; + } textInput.current.focus(); }); }; From 9514e235181848d56aa45b8df618750b54b3e1fe Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Thu, 21 Sep 2023 09:33:00 +0530 Subject: [PATCH 5/5] fix: input focus function name. Signed-off-by: Krishna Gupta --- src/pages/iou/WaypointEditor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 5eb17aac1b50..3f089ed5f115 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -157,7 +157,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); }; - const focus = () => { + const focusAddressInput = () => { InteractionManager.runAfterInteractions(() => { if (!textInput.current) { return; @@ -188,14 +188,14 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI onSelected: () => setIsDeleteStopModalOpen(true), }, ]} - onModalHide={focus} + onModalHide={focusAddressInput} /> setIsDeleteStopModalOpen(false)} - onModalHide={focus} + onModalHide={focusAddressInput} prompt={translate('distance.deleteWaypointConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')}