From 487a794040c8194d69b8160d5643fd7b8a0b7a73 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Sun, 19 Nov 2023 21:20:01 +0100 Subject: [PATCH 1/3] Use focus with delay on modal close; Move setReadyToFocus fully to hideModal --- src/components/Modal/BaseModal.tsx | 11 ++--------- .../ComposerWithSuggestions.js | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index d0e309d06766..7a54dbde54d3 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -63,11 +63,9 @@ function BaseModal( onModalHide(); } Modal.onModalDidClose(); - if (!fullscreen) { - ComposerFocusManager.setReadyToFocus(); - } + ComposerFocusManager.setReadyToFocus(); }, - [shouldSetModalVisibility, onModalHide, fullscreen], + [shouldSetModalVisibility, onModalHide], ); useEffect(() => { @@ -112,10 +110,6 @@ function BaseModal( onClose(); }; - const handleDismissModal = () => { - ComposerFocusManager.setReadyToFocus(); - }; - const { modalStyle, modalContainerStyle, @@ -176,7 +170,6 @@ function BaseModal( propagateSwipe={propagateSwipe} onModalHide={hideModal} onModalWillShow={() => ComposerFocusManager.resetReadyToFocus()} - onDismiss={handleDismissModal} onSwipeComplete={onClose} swipeDirection={swipeDirection} isVisible={isVisible} diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index e376e8481c0c..be3574611a86 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -499,7 +499,7 @@ function ComposerWithSuggestions({ InputFocus.inputFocusChange(false); return; } - focus(); + focus(true); }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]); useEffect(() => { // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit From b9b0f6033c7ea16cb9d636dc62c5a1328e757711 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Tue, 21 Nov 2023 09:41:22 +0100 Subject: [PATCH 2/3] Refocus composer on ReportAttachments modal hide --- src/components/Modal/BaseModal.tsx | 11 +++++++++-- src/pages/home/report/ReportAttachments.js | 7 ++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 7a54dbde54d3..d0e309d06766 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -63,9 +63,11 @@ function BaseModal( onModalHide(); } Modal.onModalDidClose(); - ComposerFocusManager.setReadyToFocus(); + if (!fullscreen) { + ComposerFocusManager.setReadyToFocus(); + } }, - [shouldSetModalVisibility, onModalHide], + [shouldSetModalVisibility, onModalHide, fullscreen], ); useEffect(() => { @@ -110,6 +112,10 @@ function BaseModal( onClose(); }; + const handleDismissModal = () => { + ComposerFocusManager.setReadyToFocus(); + }; + const { modalStyle, modalContainerStyle, @@ -170,6 +176,7 @@ function BaseModal( propagateSwipe={propagateSwipe} onModalHide={hideModal} onModalWillShow={() => ComposerFocusManager.resetReadyToFocus()} + onDismiss={handleDismissModal} onSwipeComplete={onClose} swipeDirection={swipeDirection} isVisible={isVisible} diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 173a4b5637be..c580da7887a2 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; import _ from 'underscore'; import AttachmentModal from '@components/AttachmentModal'; +import ComposerFocusManager from '@libs/ComposerFocusManager'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import ROUTES from '@src/ROUTES'; @@ -38,7 +39,11 @@ function ReportAttachments(props) { defaultOpen report={report} source={source} - onModalHide={() => Navigation.dismissModal()} + onModalHide={() => { + Navigation.dismissModal(); + // This enables Composer refocus when the attachments modal is closed by the browser navigation + ComposerFocusManager.setReadyToFocus(); + }} onCarouselAttachmentChange={onCarouselAttachmentChange} /> ); From 086e6064da43ac5601ee47cdfda17dec84416382 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Tue, 21 Nov 2023 10:50:09 +0100 Subject: [PATCH 3/3] Fix composer losing focus on double 'esc' click --- src/components/Modal/BaseModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index d0e309d06766..9711a60c0446 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -56,6 +56,7 @@ function BaseModal( */ const hideModal = useCallback( (callHideCallback = true) => { + Modal.willAlertModalBecomeVisible(false); if (shouldSetModalVisibility) { Modal.setModalVisibility(false); } @@ -77,7 +78,6 @@ function BaseModal( // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu Modal.setCloseModal(onClose); } else if (wasVisible && !isVisible) { - Modal.willAlertModalBecomeVisible(false); Modal.setCloseModal(null); } }, [isVisible, wasVisible, onClose]); @@ -89,7 +89,6 @@ function BaseModal( return; } hideModal(true); - Modal.willAlertModalBecomeVisible(false); // To prevent closing any modal already unmounted when this modal still remains as visible state Modal.setCloseModal(null); },