[Payment now] [$1000] Compose box - Suggestion list not displays when open group chat and write '@' #24265

lanitochka17 · 2023-08-08T13:18:10Z

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:

Precondition: user should be signed in and have a group chat with several members

Open app
Navigate to group chat
Tap on the compose box
Write '@"

Expected Result:

Suggestion list should be displayed

Actual Result:

Nothing happens

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.51.0

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

Notes/Photos/Videos: Any additional supporting documentation

Bug6157704_Suggestion_list_not_displayed_on_iphone_14_Pro_Max.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01597e4b673ae39722
Upwork Job ID: 1689186963484561408
Last Price Increase: 2023-08-09
Automatic offers:

WikusKriek | Contributor | 26156328

melvin-bot · 2023-08-08T13:18:16Z

Triggered auto assignment to @conorpendergrast (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot · 2023-08-08T13:18:18Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

jeet-dhandha · 2023-08-08T19:53:12Z

Proposal

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

On first character typed for iOS as '@' mention suggestions are not shown.

What is the root cause of that problem?

The root cause is that the state is not updated yet when onSelectionChange is called.
This is due to the fact that the state is updated in the different function and onSelectionChange is called parallel to it. This happens only on iOS for the first character typed.
Affecting PR: Fix mentions results does not close when we change focus to first character #19334 ( This PR basically introduced the issue. )

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

We should wait for the state to be updated before checking if the value is empty or not.
Changing below function

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

Lines 301 to 312 in 2e9caea

    
           onSelectionChange(e) { 
        
               LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); 
        
               this.setState({selection: e.nativeEvent.selection}); 
        
               if (!this.state.value || e.nativeEvent.selection.end < 1) { 
        
                   this.resetSuggestions(); 
        
                   this.shouldBlockEmojiCalc = false; 
        
                   this.shouldBlockMentionCalc = false; 
        
                   return; 
        
               } 
        
               this.calculateEmojiSuggestion(); 
        
               this.calculateMentionSuggestion(); 
        
           }

Updated Function Code:

Here we are moving the this.state.value check code in the setTimeout function. This will make sure that the state is updated before we check the value. Also we are only setting the timeout if the value is empty and the OS is iOS. This will make sure that we don't have any performance issues.

onSelectionChange(e) {
    LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
    const selection = e.nativeEvent ? e.nativeEvent.selection : {};
    this.setState({selection});
    const shouldWait = this.state.value === '' && getOperatingSystem() === CONST.OS.IOS;
    const ms = shouldWait ? 10 : 0;
    setTimeout(() => {
        if (!this.state.value || selection.end < 1) {
            this.resetSuggestions();
            this.shouldBlockEmojiCalc = false;
            this.shouldBlockMentionCalc = false;
            return;
        }
        this.calculateEmojiSuggestion();
        this.calculateMentionSuggestion();
    }, ms);
}

What alternative solutions did you explore? (Optional)

We should find why is this not happening on other platforms.

dukenv0307 · 2023-08-09T04:42:49Z

Proposal

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

Compose box - Suggestion list not displays when open group chat and write '@'

What is the root cause of that problem?

We calculate the mentioned suggestion on onSelectionChange. But onSelectionChange is triggered before onChangeText (native behavior on IOS)

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

We just have the same issue before. @s77rt @mollfpr Ping you here because you have context in #12854

More reference: facebook/react-native#28865

What alternative solutions did you explore? (Optional)

conorpendergrast · 2023-08-09T08:08:44Z

Reproduced on iOS native app, and not on OSX desktop.

melvin-bot · 2023-08-09T08:08:52Z

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

melvin-bot · 2023-08-09T08:08:56Z

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

melvin-bot · 2023-08-09T08:09:02Z

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

parasharrajat · 2023-08-09T09:29:53Z

The root cause is that the state is not updated yet when onSelectionChange is called.

This is due to the fact that the state is updated in a different function and onSelectionChange is called parallel to it. This happens only on iOS for the first character typed.

@jeet-dhandha These are confusing. can you update your proposal to clarify the root cause in detail?

The state is updated in a different function and onSelectionChange is called parallel to it

How does it create the issue?

parasharrajat · 2023-08-09T09:32:59Z

I would love to hear more context @s77rt @mollfpr.

WikusKriek · 2023-08-09T11:18:39Z

Proposal

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

On iOS when you launch a chat and type @ the suggestions do not open.

What is the root cause of that problem?

On iOS the this.state.value updates after the onSelectionChange event only for the first character typed. It seems like the component is not properly mounted and has this side effect that onSelectionChange runs before the value gets set. Resulting in an early return because !this.state.value is true and the calculateMentionSuggestion not running. As soon as you type @ remove it and type @ again it works fine.

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

Lines 301 to 312 in ab99bf4

    
           onSelectionChange(e) { 
        
               LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); 
        
               this.setState({selection: e.nativeEvent.selection}); 
        
               if (!this.state.value || e.nativeEvent.selection.end < 1) { 
        
                   this.resetSuggestions(); 
        
                   this.shouldBlockEmojiCalc = false; 
        
                   this.shouldBlockMentionCalc = false; 
        
                   return; 
        
               } 
        
               this.calculateEmojiSuggestion(); 
        
               this.calculateMentionSuggestion(); 
        
           }

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

We should revert this commit changes https://github.com/Expensify/App/pull/19334/files. The issue that these changes aimed to fix are no longer a problem since new upstream changes.

Specifically the early return check for !this.state.value needs to be removed in onSelectionChange. It could be moved back to calculateEmojiSuggestion() where it was prior to the changes. And e.nativeEvent.selection.end < 1 does not seem to be making any difference and could also be either moved back or completely removed.

What alternative solutions did you explore? (Optional)

N/A

mollfpr · 2023-08-09T12:53:21Z

We calculate the mentioned suggestion on onSelectionChange. But onSelectionChange is triggered before onChangeText (native behavior on IOS)

@dukenv0307 Shouldn't the issue fixed by this PR facebook/react-native#35603?

parasharrajat · 2023-08-09T14:42:26Z

Thanks for your proposal @WikusKriek Checking it...

jeet-dhandha · 2023-08-09T14:44:15Z

@parasharrajat i will update the proposal with better description.

jeet-dhandha · 2023-08-09T15:52:21Z

Proposal [UPDATED] => (#24265 (comment))

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

On first character typed for iOS as '@' mention suggestions are not shown.

What is the root cause of that problem?

Well due to lack of knowledge on react-native's Native Modules and Native UI Components, I was not able to pin-point the root cause. But I was able to find a quick fix for the issue.
As mentioned above onSelectionChange is triggered after onChangeText for iOS.
- Upstream issue for iOS: TextInput onSelectionChange() is fired before onChangeText() in IOS, and fired after onChangeText() in Android when letter typed facebook/react-native#28865
Affecting Expensify PR: Fix mentions results does not close when we change focus to first character #19334

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

We can add a 10ms timeout in onSelectionChange function.

Code change will be in below function in ReportActionCompose.js file.

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

Lines 301 to 312 in 2e9caea

    
           onSelectionChange(e) { 
        
               LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)); 
        
               this.setState({selection: e.nativeEvent.selection}); 
        
               if (!this.state.value || e.nativeEvent.selection.end < 1) { 
        
                   this.resetSuggestions(); 
        
                   this.shouldBlockEmojiCalc = false; 
        
                   this.shouldBlockMentionCalc = false; 
        
                   return; 
        
               } 
        
               this.calculateEmojiSuggestion(); 
        
               this.calculateMentionSuggestion(); 
        
           }

Updated Function Code:

onSelectionChange(e) {
    LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
    const selection = e.nativeEvent ? e.nativeEvent.selection : {};
    this.setState({selection});
    const shouldWait = this.state.value === '' && getOperatingSystem() === CONST.OS.IOS;
    const ms = shouldWait ? 10 : 0;
    
    // We need to wait for the `this.state.value` state to be updated before we can calculate the suggestions
    // Added setTimeout due to https://github.com/facebook/react-native/issues/28865 (upstream issues)
    setTimeout(() => {
        // Still keeping this code as to reset the suggestions if the user removes all the text
        if (!this.state.value || selection.end < 1) {
            this.resetSuggestions();
            this.shouldBlockEmojiCalc = false;
            this.shouldBlockMentionCalc = false;
            return;
        }
        this.calculateEmojiSuggestion();
        this.calculateMentionSuggestion();
    }, ms);
}

What alternative solutions did you explore? (Optional)

N/A

dukenv0307 · 2023-08-09T17:08:13Z

@mollfpr It dupe this issue #12854 , right?

parasharrajat · 2023-08-10T11:16:58Z

@dukenv0307 Does not seem so.

@WikusKriek I checked but the issue is still present after I reverted the changes. Can you show a video of the working solution?

@jeet-dhandha SetTimeout-based solutions are not preferred and you haven't clarified why Settimout is needed. Please add explanation with solution on how it fits on the system to solve the issue.

WikusKriek · 2023-08-10T12:42:13Z

Screen.Recording.2023-08-10.at.15.09.59.mov

@parasharrajat this is what I did, main...WikusKriek:App:24265-Suggestion-list-not-display-when-open-group-chat

parasharrajat · 2023-08-10T13:37:24Z

Try this with room chat or group chat instead of DM.

WikusKriek · 2023-08-10T13:56:20Z

Try this with room chat or group chat instead of DM.

Screen.Recording.2023-08-10.at.16.07.30.mov

@parasharrajat is it not working on your side?

parasharrajat · 2023-08-10T14:21:23Z

Going to test your diff...

parasharrajat · 2023-08-10T16:01:03Z

@WikusKriek's proposal looks good to me. We just need to revert the extra changes.

🎀 👀 🎀 C+ reviewed

parasharrajat · 2023-08-16T13:03:53Z

Bump @Beamanator

melvin-bot · 2023-08-16T14:14:24Z

📣 @parasharrajat Please request via NewDot manual requests for the Reviewer role ($1000)

melvin-bot · 2023-08-16T14:14:28Z

📣 @WikusKriek 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

Beamanator · 2023-08-16T14:14:35Z

@parasharrajat thanks for the bump, I like @WikusKriek 's proposal as well 👍

melvin-bot · 2023-08-18T11:17:22Z

🎯 ⚡️ Woah @parasharrajat / @WikusKriek, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

when @WikusKriek got assigned: 2023-08-16 14:14:28 Z
when the PR got merged: 2023-08-18 11:17:21 UTC

On to the next one 🚀

melvin-bot · 2023-08-22T03:47:13Z

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

WikusKriek · 2023-09-04T11:01:32Z

This is in production for more than 7 days, but no title update. @Beamanator can you please provide some update here on status and payments. Thanks!

parasharrajat · 2023-09-04T11:52:28Z

Yeah, it seems the automation failed on this.

parasharrajat · 2023-09-04T11:58:24Z

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:

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:

After we fixed the native selection issues in RN, the patch applied in #19334 became redundant and caused this issue.

[@parasharrajat] 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: It's not the problem on Fix mentions results does not close when we change focus to first character #19334.
[@parasharrajat] 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: I don't think we could have done anything better. We fixed the native and the workaround should have been removed. It was not known that the workaround would cause such an issue.
[@parasharrajat] Determine if we should create a regression test for this bug. Yes
[@parasharrajat] 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.

Regression Test Steps

Open app
Navigate to group chat
Tap on the compose box
Type "@"
Verify that the suggestion list displays

Do you agree 👍 or 👎 ?

conorpendergrast · 2023-09-04T19:51:24Z

I missed this today, and will pay this tomorrow 👍

conorpendergrast · 2023-09-05T14:18:56Z

Payouts due:

Issue Reporter: N/A - Applause

Contributor: $1000 + 50% urgency = $1500 @WikusKriek - via Upwork

Contributor+: $1000 + 50% urgency = $1500 @parasharrajat - via manual request please!

Eligible for 50% #urgency bonus? Yes

Upwork job is here.

conorpendergrast · 2023-09-05T14:21:37Z

Oh wait, hah, this doesn't need a new regression test - it was caught via regression testing. Ok, that's all done now. Closing!

parasharrajat · 2023-09-11T19:49:41Z

Payment requested as per #24265 (comment)

JmillsExpensify · 2023-09-21T09:45:21Z

$1,500 payment for @parasharrajat approved based on BZ summary.

lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Aug 8, 2023

melvin-bot bot assigned conorpendergrast Aug 8, 2023

conorpendergrast added the External Added to denote the issue can be worked on by a contributor label Aug 9, 2023

melvin-bot bot changed the title ~~Compose box - Suggestion list not displays when open group chat and write '@'~~ [$1000] Compose box - Suggestion list not displays when open group chat and write '@' Aug 9, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Aug 9, 2023

melvin-bot bot assigned parasharrajat Aug 9, 2023

melvin-bot bot assigned Beamanator Aug 10, 2023

allroundexperts mentioned this issue Aug 11, 2023

[Duplicate of #24265] Mention popup is not opening the first time '@' is entered #24454

Closed

6 tasks

WikusKriek mentioned this issue Aug 13, 2023

24265 suggestion list not display when open group chat #24512

Merged

58 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Aug 13, 2023

Beamanator assigned WikusKriek Aug 16, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Aug 16, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Aug 16, 2023

mvtglobally mentioned this issue Aug 23, 2023

Deploy Checklist: New Expensify 2023-08-21 #25625

Closed

parasharrajat mentioned this issue Aug 24, 2023

[HOLD for payment 2023-09-27] [HOLD for payment 2023-09-06] [$1000] Mention list doesnt automatically popup when typing @ #25649

Closed

6 tasks

conorpendergrast added the Awaiting Payment Auto-added when associated PR is deployed to production label Sep 4, 2023

conorpendergrast changed the title ~~[$1000] Compose box - Suggestion list not displays when open group chat and write '@'~~ [Payment now] [$1000] Compose box - Suggestion list not displays when open group chat and write '@' Sep 4, 2023

conorpendergrast added Daily KSv2 and removed Weekly KSv2 labels Sep 4, 2023

conorpendergrast closed this as completed Sep 5, 2023

[Payment now] [$1000] Compose box - Suggestion list not displays when open group chat and write '@' #24265

[Payment now] [$1000] Compose box - Suggestion list not displays when open group chat and write '@' #24265

Comments

lanitochka17 commented Aug 8, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Aug 8, 2023

melvin-bot bot commented Aug 8, 2023 • edited by conorpendergrast Loading

Bug0 Triage Checklist (Main S/O)

jeet-dhandha commented Aug 8, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dukenv0307 commented Aug 9, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

conorpendergrast commented Aug 9, 2023

melvin-bot bot commented Aug 9, 2023

melvin-bot bot commented Aug 9, 2023

melvin-bot bot commented Aug 9, 2023

parasharrajat commented Aug 9, 2023

parasharrajat commented Aug 9, 2023

WikusKriek commented Aug 9, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

mollfpr commented Aug 9, 2023

parasharrajat commented Aug 9, 2023

jeet-dhandha commented Aug 9, 2023

jeet-dhandha commented Aug 9, 2023

Proposal [UPDATED] => (#24265 (comment))

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dukenv0307 commented Aug 9, 2023

parasharrajat commented Aug 10, 2023 • edited Loading

WikusKriek commented Aug 10, 2023 • edited Loading

parasharrajat commented Aug 10, 2023

WikusKriek commented Aug 10, 2023 • edited Loading

parasharrajat commented Aug 10, 2023

parasharrajat commented Aug 10, 2023

parasharrajat commented Aug 16, 2023

melvin-bot bot commented Aug 16, 2023

melvin-bot bot commented Aug 16, 2023

Beamanator commented Aug 16, 2023

melvin-bot bot commented Aug 18, 2023

melvin-bot bot commented Aug 22, 2023

WikusKriek commented Sep 4, 2023

parasharrajat commented Sep 4, 2023

parasharrajat commented Sep 4, 2023

Regression Test Steps

conorpendergrast commented Sep 4, 2023

conorpendergrast commented Sep 5, 2023

Payouts due:

conorpendergrast commented Sep 5, 2023

parasharrajat commented Sep 11, 2023

JmillsExpensify commented Sep 21, 2023

lanitochka17 commented Aug 8, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Aug 8, 2023 •

edited by conorpendergrast

Loading

parasharrajat commented Aug 10, 2023 •

edited

Loading

WikusKriek commented Aug 10, 2023 •

edited

Loading

WikusKriek commented Aug 10, 2023 •

edited

Loading