paultsimura
commented
1 year ago Proposal
Please re-state the problem that we are trying to solve in this issue.
When clicking "Esc" multiple times, the attachment preview glitches.
What is the root cause of that problem?
The root cause here is buried quite deep and required a lot of debugging, so I'll try to be as detailed as possible here.
TL;DR
When we are hiding the attachments modal, we try to focus the composer, which causes the onScroll event on the FlatList inside the AttachmentCarousel. This causes an avalanche effect of bugs.
This same RCA can be easier reproduced here: https://github.com/Expensify/App/issues/29109
More detailed explanation:
In ComposerWithSuggestions, we are trying to focus the Composer right after we hide the modal:
However, since the modal dismissal is an animated process, it's not happening right away. So we are, in fact, focusing on the composer when the modal is still open. The focus action fires a scroll event, which is then captured by the FlatList inside the AttachmentsCarousel (since FlatList is a combination of a VirtualizedList and a ScrollView).
Here's the call stack that comes all the way back to the ComposerWithSuggestions:
This, as a result, causes the onViewableItemsChanged of the FlatList, which causes glitchy change of the image in this issue, and the endless redirection loop in https://github.com/Expensify/App/issues/29109.
What changes do you think we should make in order to solve the problem?
First, we need to call the composer focus on modal hide with delay:
- focus();
+ focus(true);
}, [focus, prevIsFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);Second, the focusWithDelay relies on ComposerFocusManager.isReadyToFocus():
This is, in fact, barely useful since the ComposerFocusManager.resetReadyToFocus() is called only in one place, and it's on Android:
We should set the composer as "not ready to focus" every time a modal is open, and set it back to "ready to focus" when the modal is dismissed.
For this, we need to add the following prop to the ReactNativeModal component (it was by mistake removed in https://github.com/Expensify/App/pull/25672):
+ const handleModalWillShow = () => {
+ ComposerFocusManager.resetReadyToFocus();
+ };
...
return (
<ReactNativeModal
onBackdropPress={handleBackdropPress}
// Note: Escape key on web/desktop will trigger onBackButtonPress callback
// eslint-disable-next-line react/jsx-props-no-multi-spaces
onBackButtonPress={onClose}
+ onModalWillShow={handleModalWillShow}
onModalShow={handleShowModal}
propagateSwipe={propagateSwipe}
....This solution alone would be enough to solve the current issue. However, if we want to fix both this and https://github.com/Expensify/App/issues/29109 in one take, we should make the following change:
Third, we need to correctly handle setting back the composer to "Ready to focus".
Currently, the ComposerFocusManager.setReadyToFocus() is called in 2 places in BaseModal:
Calling it in the handleDismissModal was preferred because it's called finally, after the onModalHide. But this specific method - Modal.onDismiss - is not called in case of a non-fullscreen modal, and it's not called on navigating back via browser navigation.
The non-fullscreen case is already handled in hideModal, but since the Attachment modal is full-screen, the "go-back" navigation will not call the ComposerFocusManager.setReadyToFocus() at all, so the composer will not be focused on closing the attachment preview by navigating back.
That's why my suggestion is to move the ComposerFocusManager.setReadyToFocus() fully into hideModal:
Remove handleDismissModal and make this change:
- const handleDismissModal = () => {
- ComposerFocusManager.setReadyToFocus();
- };
...
const hideModal = useCallback(
(callHideCallback = true) => {
if (shouldSetModalVisibility) {
Modal.setModalVisibility(false);
}
if (callHideCallback) {
onModalHide();
}
Modal.onModalDidClose();
- if (!fullscreen) {
ComposerFocusManager.setReadyToFocus();
- }
},
[shouldSetModalVisibility, onModalHide, fullscreen],
);
....
return (
<ReactNativeModal
onBackdropPress={handleBackdropPress}
// Note: Escape key on web/desktop will trigger onBackButtonPress callback
// eslint-disable-next-line react/jsx-props-no-multi-spaces
onBackButtonPress={onClose}
+ onModalWillShow={handleModalWillShow}
- onDismiss={handleDismissModal}As a result, we will have both issues fixed, as it solves the actual root cause, and is not a workaround compared to some existing proposals:
https://github.com/Expensify/App/assets/12595293/61f76d19-60c4-4776-afb5-31f6d45d0f3a
What alternative solutions did you explore? (Optional)
Optionally, we could only call the ComposerFocusManager.setReadyToFocus() for the attachment modal here:
https://github.com/Expensify/App/blob/7fb66cdd840ba14f5c958dd60fc1bb4f75d58bab/src/pages/home/report/ReportAttachments.js#L33
But I don't see any major reason against step 3 of this proposal, as it will be more versatile.
melvin-bot[bot]
abdulrahuman5196
tsa321
pradeepmdk
Christinadobrzyn
shubham1206agra
hayata-suenaga
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
multiple times, observe that preview closes, reopens with different image and closesExpected Result:
App should close preview on ESC click (note you need to press Esc multiple times)
Actual Result:
App glitches on closing preview on ESC click
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.61-1 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation
https://github.com/Expensify/App/assets/93399543/1c6168d6-ff13-4892-892f-4a98015c026a
https://github.com/Expensify/App/assets/93399543/9e5b35a2-db33-474a-957e-6fe952084b2e
Expensify/Expensify Issue URL: Issue reported by: @dhanashree-sawant Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693558112570809
View all open jobs on GitHub
Upwork Automation - Do Not Edit