[$250] iOS Workspace - Invite message field does not auto-focus

[IuliiaHerets]

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

---

Version Number: 9.0.69-1 Reproducible in staging?: Y Reproducible in production?: N If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Launch ND or hybrid app.
2. Go to workspace settings > Members.
3. Tap Invite member.
4. Select a member > Next.

Expected Result:

Invite message field will auto-focus (production behavior).

Actual Result:

Invite message field does not auto-focus.

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/95596459-308f-419b-afb1-29e346e8dbd2

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863622226791951808
• Upwork Job ID: 1863622226791951808
• Last Price Increase: 2024-12-09

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

Triggered auto assignment to @sakluger (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.

[melvin-bot[bot]]

💬 A slack conversation has been started in #expensify-open-source

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[mountiny]

@chrispader @kirillzyusko @hannojg something to look into, i dont think this is a blocker so demoted.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[brunovjk]

I can reproduce. It seems related to FE, looking for proposals.

v9.0.69-2 Develop

https://github.com/user-attachments/assets/0397cf40-6bfb-497b-8b37-c31bdf7dc958

[QichenZhu]

Proposal

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

The input field for the message to invite workspace members doesn’t auto-focus.

What is the root cause of that problem?

The updateMultilineInputRange() function tries to focus the input but fails silently due to a known React Native bug.

https://github.com/Expensify/App/blob/ce282d38777e9e0a267e1b6f44bff9c4aace98ee/src/pages/workspace/WorkspaceInviteMessagePage.tsx#L203

https://github.com/Expensify/App/blob/ce282d38777e9e0a267e1b6f44bff9c4aace98ee/src/libs/updateMultilineInputRange/index.ios.ts#L23

Details can be found in the upstream issue https://github.com/facebook/react-native/issues/47576.

In the new architecture, native view commands are dispatched immediately to the UI thread

But mounting operations are only flushed at the end of the current task in the event loop / runtime scheduler

That causes problems when invoking native view commands on views that were just created

On Android, this works correctly because we queue the native view command in the same queue as mount operations, so they're always processed in the right order.

This shares the same cause as https://github.com/Expensify/App/issues/51728.

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

Like https://github.com/Expensify/App/issues/51728, I suggest holding this for React Native upgrade, as this doesn't affect the app's functionality.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

There is no need to add tests, as this is caused by an upstream bug.

What alternative solutions did you explore? (Optional)

A number of similar issues are worked around by focusing with a delay, which is already implemented in the useAutoFocusInput hook. However, it doesn't work currently because the first failing focus attempt causes future programmatic focus to fail as well. To make useAutoFocusInput work, we need to empty the updateMultilineInputRange() function on iOS.

https://github.com/Expensify/App/blob/82b76c1a36cf1a01b00c14510a5812a591e7f2fd/src/libs/updateMultilineInputRange/index.ios.ts#L12

const updateMultilineInputRange: UpdateMultilineInputRange = (input, shouldAutoFocus = true) => {/* Do nothing */}

[brunovjk]

Thank you for the proposal, @QichenZhu. I think your RCA makes sense, and holding for the RN upgrade isn’t a bad idea. I tested your alternative solution, and it fixes the issue, but I haven’t checked for regressions elsewhere. @puneetlath, could you advise on the next steps? Thank you!

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

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

[kirillzyusko]

Thank you @QichenZhu for a proposal

I like it and I think we can go with that. The only thing that we need to come to agreement is whether we should wait for next RN upgare (will it be fixed in 0.76) or we need to create a workaround/fix and remove it when update to RN 0.76 will happen?

[QichenZhu]

Thanks for the feedback! The fix will be released in 0.77. We can also submit a pick request to ask them to include it in older versions like 0.75 or 0.76 if needed.

[kirillzyusko]

Well, I think it's up to Expensify team on which approach to choose.

One thing I can say from my side is that we are still on RN 0.75 and have a pending PR with RN 0.76, so if the fix is available only in RN 0.77 then I think it may take up to several months to close this issue 👀

P. S. just had a look on PR with the fix - @QichenZhu can't we apply these changes as a patch? I think we are building from sources, so c++ code shouldn't be a problem? Or are you aware about potential issues/problems?

[QichenZhu]

can't we apply these changes as a patch?

@kirillzyusko Yes, it’s possible.

I’ve tried to backport the fix to 0.75 and drafted a patch in my proposal for another issue.

Since 0.75 and 0.77 span two major versions and this involves changes to the scheduler, it will need thorough testing.

I think it would be safer to patch 0.76, which is closer to 0.77, or we could request the RN team to handle it.

Let’s wait for the Expensify team’s decision.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[sakluger]

Not overdue, just waiting for Puneet's review.

[puneetlath]

Is this the only flow that is affected by this bug? If so, it feels not really worth patching to me and it'd be fine to wait for the fix to go-live upstream.

[brunovjk]

Is this the only flow that is affected by this bug? If so, it feels not really worth patching to me and it'd be fine to wait for the fix to go-live upstream.

I think there are others, like this one, mentioned by @QichenZhu, but also on hold for the React Native 0.76 upgrade. I think it’s worth holding here as well. I’ll keep an eye on this and test the issue afterward. Thought @sakluger @puneetlath?

[puneetlath]

That sounds good to me. I put it on hold.

[brunovjk]

Still on hold for Upgrade to React Native 0.76

[QichenZhu]

Update: The upstream team has decided not to include the fix in React Native 0.76.

I noticed others are working on https://github.com/Expensify/App/pull/54755 and https://github.com/Expensify/App/issues/54759, so we can see if that solves the problem.

[brunovjk]

I can still reproduce the issue:

https://github.com/user-attachments/assets/eed94dc2-ded4-4abc-89a1-f1a48bef6e19

You too @QichenZhu? Thanks.

[QichenZhu]

@brunovjk Yes, I can also reproduce it. However, I tested the ad-hoc build from the RN 0.77 upgrading PR, and it seems resolved there.

[brunovjk]

Thank you @QichenZhu !

[brunovjk]

Update: Still holding for the upgrade to RN 0.77

[brunovjk]

After upgrading to RN 0.77 I can no longer reproduce this issue. @sakluger and @IuliiaHerets can we retest, and eventually close this issue? Thanks.

[sakluger]

I asked QA for a retest: https://expensify.slack.com/archives/C9YU7BX5M/p1744655706333589

[IuliiaHerets]

@sakluger Issue is not reproducible in the latest build (v9.1.28-1)

https://github.com/user-attachments/assets/6fbe45d1-dcf0-4f9d-a43b-e004aedd4e65