[Discussion] ReportView and ReportActionCompose enhancements

If you haven’t already, check out our contributing guidelines for onboarding and email [e-mail] to request to join our Slack channel!

---

I’m opening this ticket as a follow up discussion related to https://github.com/Expensify/Expensify.cash/issues/1855#issuecomment-808135377

Problems

Side effects caused by componentDidUpdate in ReportActionCompose

• as in #1855

Side effects due to the text field inside ReportActionCompose can steal or keep focus to itself

• as in #1228

Switching between reports (chats) show the previous reports briefly. Then content is swapped and some repositioning happens while more content is loading

https://user-images.githubusercontent.com/12156624/112819293-1ca07b80-908d-11eb-8164-cdd7082e3e78.mp4

Related app modules/components

The ReportActionCompose is the component used to type messages, add attachments and other chat related interactions. It is been known to cause some side effects

The ReportView Displays a chat/report by wrapping ReportActionsView (list of chat items) and ReportActionCompose

These components are part of the “Home” screen of the app. Without going into great detail - it’s a screen at the root of the navigation and the rest of the screens would be stacked on top of it. It’s something that would rarely re-mount (if ever)

“Home” is a DrawerNavigator rendering a ReportScreen and a SidebarScreen These two are always rendered together even though on smaller screens only one of them is visible at a time. The sidebar lists chats/reports and the report screen renders the selected report

Expected Result:

Prevent the input field in ReportActionCompose from getting focus while we’re away from the ReportView.

We are considered away when:

• other navigation screens are on top. This should be handled automatically by react-navigation, also the “hasFocus” HOC created here #1855 can help
• the side drawer is expanded over the ReportView. This would happen only on small screens - mobile and mobile web.

Focus the compose text field when:

• When we are navigating to a report/chat from some other route
• When the drawer has opened from the LHN to the report
• When we are closing an “attachment modal”

Quoted from https://github.com/Expensify/Expensify.cash/pull/2022#issuecomment-808410246

Note: this is web/desktop specific behaviour as on mobile and mobile web a focus will bring up the keyboard and hide a big chunk of the screen

Provide a smoother transition between reports

Version Number: Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation Expensify/Expensify Issue URL:

[kidroca]

@marcaaron My general idea was around how re-mounting components can help us organize the code better and reduce componentDidUpdate usages but it exploded 😃

1. Main issue was the call to set focus on the input based on “if and and and…” Probably this would be covered in #1855. I just wanted to provide some insights. I’m not sure whether it would cover everything like modals - there are modals handled by react navigation - the focusHOC would work for them and popover modals not handled by rn nav - the focusHOC won’t work, stuff like that.
2. Autofocus should be skipped on mobile web or mobile native as this would always bring the keyboard up and take a huge chunk of your screen when you just want to read the chat - I don’t think this is covered by any ticket.
3. Brief loading during report switches. This spun up from the linked discussion
4. By “stealing focus” I guess I didn’t pick the correct words, but there are still issue apart from autofocus - like the keyboard staying open when you tap over the back button in the header of a chat - the side drawer appears and the keyboard should have been dismissed but it’s not

I saw we’re on the same page regarding adding more if/and checks for focus, but I didn’t see a proposition for an alternative so I thought we might discuss it here

I can create separate tickets for 2, 3, 4 and close this one

[kidroca]

Closing this to avoid confusion. Separate issues will be extracted as needed