[HOLD for payment 2022-09-26] [$250] TextField(Composer) is not focused again when group chat participants Details drawer is closed - Reported by @aneequeahmad

[mvtglobally]

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:

1. Open any group chat or create a new group chat from + icon on LHN
2. Click on top header to open chat participants details.
3. Click on cross icon of Details.

Expected Result:

TextInput should be focused

Actual Result:

TextInput isn't focused

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.96-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
potentially related to #10414

Screen.Recording.2022-08-24.at.1.11.23.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @aneequeahmad
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1661285952608309

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @puneetlath (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Current assignee @puneetlath is eligible for the External assigner, not assigning anyone new.

[puneetlath]

Internal upwork job: https://www.upwork.com/ab/applicants/1567811708523073536/job-details
External upwork job: https://www.upwork.com/jobs/~01f274e1ebbcbe68a6

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[melvin-bot]

Current assignee @puneetlath is eligible for the Exported assigner, not assigning anyone new.

[sanjayradadiya]

Need to fire text focus again when we close the drawer on drawer close event.

[hashirafique]

Hello, I just explored about your company Expensify and the work you people are doing is great. I visited this github link and watched the video and understand that you want this text field to stay focused even when we click on the details of a user. From my initial understanding, you are having some issues with your CSS Psuedo Classes such as focus and active. And if you require further edition in the website on ReactJS then I'll be right person to do so.

For editing, I would first of all trace down its component where this is written and then afterwards as I have mentioned above that as per my understanding there is an issue with the CSS Pseudo CLasses then I'll change that class to the right one. However I feel that there's the similar issue on every text field so I'll trace their components and edit them as per your requirement. Furthermore I'll edit this code as per your requirement which is mentioned below.

Looking forward to hearing from you.

Regards,
Hashir

https://www.upwork.com/ab/proposals/1567856788281503745?success This is my upwork proposal

[mollfpr]

Proposal

Root cause
To focus the composer it depends on modal.isVisible. But currently when open ReportParticipantsPage, the Onyx key of modal.isVisible is not set to true and instead has a false value even after the page is closed.

App/src/pages/home/report/ReportActionCompose.js

Lines 162 to 174 in 1718572

	componentDidUpdate(prevProps) {
	const sidebarOpened = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
	if (sidebarOpened) {
	toggleReportActionComposeView(true);
	}
	// We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
	// We avoid doing this on native platforms since the software keyboard popping
	// open creates a jarring and broken UX.
	if (this.shouldFocusInputOnScreenFocus && this.props.isFocused
	&& prevProps.modal.isVisible && !this.props.modal.isVisible) {
	this.focus();
	}

There's a modal listener to set the modal.isVisible when the modal is focused or before closing, but the screen definition with not set the modal screen listener to the ReportParticipantsPage so that's why the modal.isVisible value will still to be a false.

App/src/libs/Navigation/AppNavigator/AuthScreens.js

Lines 260 to 264 in 1718572

	<RootStack.Screen
	name="Participants"
	options={modalScreenOptions}
	component={ModalStackNavigators.ReportParticipantsModalStackNavigator}
	/>

Solution
Adding the modal screen listeners to the screen option.

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 3454a6847..335adbec4 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -261,6 +261,7 @@ class AuthScreens extends React.Component {
                     name="Participants"
                     options={modalScreenOptions}
                     component={ModalStackNavigators.ReportParticipantsModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="IOU_Request"

Result

Screen.Recording.2022-09-08.at.20.47.59.mov

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[rushatgabhane]

@hashirafique thanks for your interest, I'd suggest that you read contributing.md. All contributors are expected to post proposals on Github

[rushatgabhane]

@sanjayradadiya thanks for your proposal, but it lacks implementation details. I'd suggest that you take a look at closed issues with Exported label to get a better idea of what we expect from a proposal.
Thanks!

[rushatgabhane]

@puneetlath I like @mollfpr's proposal. The root cause is explained and dealt directly with.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

📣 @mollfpr You have been assigned to this job by @puneetlath!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[puneetlath]

@mollfpr very clear proposal thanks. Let's do it!

[mollfpr]

Applied to Upwork and PR raised, thanks!

[puneetlath]

Thanks! @aneequeahmad can you please also apply to the Upwork job?

[aneequeahmad]

@puneetlath I have applied to the Upwork job. Thanks

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.1-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• adding screen listener to participants page #10938

If no regressions arise, payment will be issued on 2022-09-26. 🎊

[puneetlath]

All paid. Thanks everyone!