[HOLD for Payment 2024-09-09][$250] Mention - Mention list takes 2-3 seconds to remove after sending a message

[lanitochka17]

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.7-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/runs/view/22744&group_by=cases:section_id&group_order=asc&group_id=306201
Email or phone of affected tester (no customers): shussain+andmob2@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open a chat
2. Mention a user by entering their username/email
3. Send the message without selecting the user from the list

Expected Result:

After sending the message without selecting the user from the list, the mention list should be immediately removed

Actual Result:

Mention list takes 2-3 seconds to remove after sending a message

Workaround:

Unknown

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

Add any screenshot/video evidence

Bug6543739_1721125677358.WhatsApp_Video_2024-07-16_at_15.25.50.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012c64667ec4d95daf
• Upwork Job ID: 1813327338752177204
• Last Price Increase: 2024-07-30

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-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.

[lanitochka17]

We think that this bug might be related to #vip-vsp

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

Awaiting proposals

[sakluger]

Still no proposals.

[ishpaul777]

we are looking for proposals

[melvin-bot]

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

[fabOnReact]

Proposal

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

The mention list is not removed immediately after sending a message. The mention list is removed after 2-3 seconds on Android.

What is the root cause of that problem?

• The function handleSendMessage runs in a worklet and the logic is wrapped in runOnJS which calls an asynchronous callback on the UI thread. The delay is caused by the asynchronous callbacks.
• setNativeProps is used to update immediately the text of the native Android ReactEditText (on iOS UITextView), without a delay of 2-3 seconds.

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

Line 369 in 1084706

setNativeProps(animatedRef, {text: ''}); // clears native text input on the UI thread

In the video below you can see how the mention list disappears with 2-3 seconds of delay, while the RNMarkdownTextInput text disappears immediately.

Screen.Recording.2024-07-26.at.4.11.57.PM.mov

After commenting setNativeProps, the TextInput text/value and the suggestions disappear together after a delay of 2-3 seconds.

Screen.Recording.2024-07-26.at.4.08.46.PM.mov

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

The solution consists of the following steps:

1. Passing a forwardRef from ReportActionCompose.tsx to ComposeWithSuggestions.
2. Set the ref on the HostComponent responsible for displaying the Suggestions. From a quick investigation, I was able to hide the Suggestions by changing the style of the View HostComponent in AutoCompleteSuggestionsPortal.
3. hiding the Suggestions using ref.current.setNativePros({{ transform: [{ scale: 0 }] }) from the ReportActionCompose.tsx function handleSendMessage

You can find here my detailed explanation of why we use setNativeProps to clear the value of the TextInput.

What alternative solutions did you explore? (Optional)

An alternative approach is useAnimatedStyle or useAnimatedProp to hide the Suggestions.

1. Use a reanimated shared value to save the state change for hiding the suggestions. The message is sent with SendButton and the ReportActionCompose handleSendMessage function.
2. create an animatedStyle based on the shared value.
3. use animatedStyle in Suggestions.tsx to hide the suggestions.

I don't believe it will work, because the logic runs asynchronously on the JS thread, which causes this delay of 2-3 seconds.
We need to update immediately the native UI and skip any update in JavaScript, which can be done using setNativeProps.

https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#remarks

When you change the sv.value the update will happen synchronously on the UI thread. On the other hand, on the JavaScript thread the update is asynchronous. This means when you try to immediately log the value after the change it will log the previously stored value.

[fabOnReact]

Proposal

Updated

• added clear implementation steps for the solution
• added information about alternative solutions

[ishpaul777]

Thanks for your proposal @fabOnReact, it looks promising 👍, would you be able to provide a testing branch so i can test this quickly

[melvin-bot]

@sakluger, @ishpaul777 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ishpaul777]

not overdue, just waiting for test branch to test proposal solution

[melvin-bot]

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

[melvin-bot]

@sakluger @ishpaul777 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[perunt]

Hey guys, I'm back. I'll add this to my list and start working on this soon.
So, I'll take care of the suggestion box disappearing immediately

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[ishpaul777]

not overdue, @perunt Any updates?

[perunt]

@ishpaul777 the original issue was that the suggestion didn't hide immediately. However, we later agreed that this was expected behavior. Now, the actual issue is the inconsistent behavior between platforms. Is my understanding correct?
If yes, then I have a fix for that.

[ishpaul777]

Now, the actual issue is the inconsistent behavior between platforms.

thats correct @perunt

[perunt]

Nice! I made kind of a one-line fix for that. The problem was that the gesture handler was checking if the view was translucent, so to avoid it, I added a transparent color to that view

[ishpaul777]

Deployed 3 days ago, automation failed Can we add Awaiting payment label

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[sakluger]

Sorry for the delay in handling payment. @ishpaul777 as far as payment goes, I could use your advice.

While I do think that you (@ishpaul777) are due payment for your review, I don't think any other payment is due here. Android should have been tested and included on the original PR, so I don't think we should pay for the follow-up PR that was created to align the behavior. What do you think?

[ishpaul777]

Yes thats correct, btw @perunt is a agency member (Margelo, i guess) so no payments anyways.

[sakluger]

Ah, good call. @ishpaul777 here is the Upwork offer for you: https://www.upwork.com/nx/wm/offer/103906016

[sakluger]

@ishpaul777 can you let me know once you've accepted the offer?

[ishpaul777]

thanks! I accepted the offer

[sakluger]

Thanks! All paid.

We already have a regression test for this which is how this was caught. So I think we're fine to close the issue.