[HOLD for payment 2024-08-09] [$250] Not able to dismiss keyboard on invite workspace member page

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.11-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Expensify/Expensify Issue URL:
Issue reported by: @allgandalf
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1721832207268919

Action Performed:

1. Create a workspace
2. Go to members
3. Click invite members > search for any user
4. Click next
5. On the Invite message page try to dismiss the keyboard

Expected Result:

User able to dismiss the keyboard by tapping Return key

Actual Result:

Unable to dismiss the keyboard

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

RPReplay_Final1721832050.MP4

RPReplay_Final1721839996.MP4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ad48ce8ad9a0c2ca
• Upwork Job ID: 1816194231400089538
• Last Price Increase: 2024-07-24

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[allgandalf]

Note

I can take over as C+ as i reported the bug and have more context

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Can't close keyboard in invite workspace message page.

What is the root cause of that problem?

The input ref callback calls updateMultilineInputRange which will focus on the input.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 206 to 212 in 98eb1bb

	ref={(element: AnimatedTextInputRef) => {
	if (!element) {
	return;
	}
	inputCallbackRef(element);
	updateMultilineInputRange(element);
	}}

Every time the ref callback is called, the input is focused, so we can't close the keyboard because it keeps getting refocused.

I checked and this happens in some pages too that follows the same pattern as above.

What changes do you think we should make in order to solve the problem?

We need to call updateMultilineInputRange only once for the first time it's called. We can create a ref to flag it.

if (isInputInitialized.current) {
    return;
}
isInputInitialized.current = true;
updateMultilineInputRange(el);

What alternative solutions did you explore? (Optional)

The reason we put it inside the ref callback is that we want to call it on the mount, however, the input is wrapped in a FormProvider which uses withOnyx hook. If we call it on the mount, it's possible that the form is not rendered yet because withOnyx is still "loading". We can migrate form from withOnyx to useOnyx and then calls updateMultilineInputRange in a useEffect (on mount) instead in the ref callback, but this solution is risky because we are modifying the form component.

[bernhardoj]

Added an alternative solution.

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Not able to dismiss keyboard on invite workspace member page

What is the root cause of that problem?

We added an ios only fix here that called focus on the input on every update:

App/src/libs/updateMultilineInputRange/index.ios.ts

Lines 17 to 24 in 912c804

	/*
	* Adding this iOS specific patch because of the scroll issue in native iOS
	* Issue: does not scroll multiline input when text exceeds the maximum number of lines
	* For more details: https://github.com/Expensify/App/pull/27702#issuecomment-1728651132
	*/
	if (shouldAutoFocus) {
	input.focus();
	}

This has since been fixed in react native and the ios only code is no longer needed. We can remove it.

What changes do you think we should make in order to solve the problem?

We should remove the file here with the ios only hack:

App/src/libs/updateMultilineInputRange/index.ios.ts

Line 12 in 912c804

const updateMultilineInputRange: UpdateMultilineInputRange = (input, shouldAutoFocus = true) => {

Result

This works perfectly:

iOS

Screen.Recording.2024-07-24.at.11.49.02.PM.mov

Web

Screen.Recording.2024-07-24.at.11.49.46.PM.mov

[Christinadobrzyn]

I can reproduce this, and I think it's part of VIP-VSB. I think this can be external so adding some labels.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ad48ce8ad9a0c2ca

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

[allgandalf]

hey @Christinadobrzyn , can i be the C+ here? i reported the issue and have context, mentioned about it here

[aimane-chnaif]

Was there any discussion about being C+ on the issue if they reported that bug?

[aimane-chnaif]

There are 2 root causes which make this bug happen:

• iOS hack to focus manually on ref callback
• ref callback is called multiple times as the input is wrapped in FormProvider

[aimane-chnaif]

@neonbhai your solution causes regression - #21654

This has since been fixed in react native and the ios only code is no longer needed. We can remove it.

I am not sure what's fixed. Focus always worked in old RN. We added that line just to fix #21654.

[aimane-chnaif]

@bernhardoj's proposal (main solution) looks good to me.
I think alternative solution is too risky to fix this iOS specific bug. Maybe we can further investigate on a separate issue.
🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bernhardoj]

PR is ready

cc: @aimane-chnaif

[Christinadobrzyn]

update for melvin - PR is under review

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• Fix can't close keyboard in some pages #46172

If no regressions arise, payment will be issued on 2024-08-09. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment through NewDot Manual Requests
• @aimane-chnaif requires payment through NewDot Manual Requests
• @allgandalf requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR:
• [@aimane-chnaif] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@aimane-chnaif] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@aimane-chnaif] Determine if we should create a regression test for this bug.
• [@aimane-chnaif] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@Christinadobrzyn] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Christinadobrzyn]

Payouts due (needs review).

• Contributor: $250 @bernhardoj (paid through NewDot)
• Contributor+: $250 @aimane-chnaif (paid through NewDot)

@allgandalf can you confirm the role you played in this job? Also, what is your Upwork profile?

@aimane-chnaif do we need a regression test?

[aimane-chnaif]

@aimane-chnaif do we need a regression test?

I don't think so as this is iOS specific bug and super minor, not affecting product.

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[Christinadobrzyn]

We're at payday. @aimane-chnaif can you please request $250 payment through NewDot?

Otherwise, I think we can close this since there's no regression test. Let me know if I'm missing anything!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @bernhardoj owed $250 via NewDot
• Reviewer: @aimane-chnaif owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified the payment summary above is correct

[Christinadobrzyn]

This is pending NewDot payment to @aimane-chnaif but we can close while that is processing.

Let me know if I've missed anything.

[aimane-chnaif]

@Christinadobrzyn I am still using upwork. Can you please reopen and sort payment? Thanks