Focus compose field when modal dismissed

[Beamanator]

Details

Re-implemented compose field being focused when a page-level modal gets dismissed (this broke due to a small regression that was introduced by the recent React-navigation overhaul).

Before the React-Navigation upgrade, closing a page-modal (like /search) would trigger BaseModal's onModalHide callback, which is where we handled a few important things (mainly unsubscribing from keyboard events and setting modal visibility).

After the React-navigation overhaul, when a user navigates away from a page with a modal, BaseModal gets taken out of the DOM before it has time to trigger its onModalHide callback.

To fix, I've added a new function hideModalAndRemoveEventListeners which contains the functions to hide the modal and unregister key event listeners. This function is now called in componentWillUnmount (for page-modals that unmount immediately upon navigation) and in onModalHide (for FAB, which isn't unmounted after its modal hides).

Other notes can be found here: https://github.com/Expensify/Expensify/issues/154180#issuecomment-799676117

Note: Original PR which focused the compose field when closing modals (cc @tgolen): #1699

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/154180

Tests

1. Go to a chat and start typing a comment
2. Open up the LHN search
3. Close the search modal (or select any chat)
4. Verify that the compose field gets focus

Tested On

• Web
• Mobile Web
• Desktop
• iOS (n/a because the field does not get focus by design)
• Android (n/a because the field does not get focus by design)

Screenshots

Web

Not really any screenshots necessary

Mobile Web

Not really any screenshots necessary

Desktop

Not really any screenshots necessary

iOS

Not really any screenshots necessary

Android

Not really any screenshots necessary

[tgolen]

Do we need to adjust the onModalHide() callback in the render method below? If those aren't firing at all now, then there is maybe a little more we should do when unmounting the component.

[Beamanator]

@tgolen yeah I believe onModalHide() is only still being triggered when the FAB is opened & closed

The only things happening here other than setModalVisibility(false) are:

1. unsubscribeFromKeyEvents (which was already previously added to componentWillUnmount
2. this.props.onModalHide()
   • onModalHide is only being passed in CreateMenu (which doesn't get unmounted)

So I think we're good to go - but obviously I defer to you :D

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[tgolen]

OK, thanks. Can unsubscribeFromKeyEvents and setModalVisibility be removed from that callback now?

[Beamanator]

@tgolen as per our discussion, I've moved the repetitive code into a new function hideModalAndRemoveEventListeners, and called that in componentWillUnmount and onModalHide 👍🏽

I also added the updates in the OP so it remains accurate

[stitesExpensify]

Nice!