[$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter #35518

kbecciv · 2024-01-31T21:29:03Z

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: 1.4.34-0
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?/tests/view/4257656
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause- Internal Team
Slack conversation:

Action Performed:

Open https://staging.new.expensify.com/
Log in under your HT account
Navigate to any conversation
Paste the text "@BOSS" into the Compose Box
Press Shift+Enter 5-6 times

Expected Result:

When using the Shift+Enter keyboard shortcut, the list of users should disappear or remain above the Compose Box and not overlap it

Actual Result:

The list of users in mentions does not disappear when using the Shift+Enter keyboard shortcut.

Workaround:

Unknow

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6362877_1706734190033.Recording__1240.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~015d7b4a51ced33c18
Upwork Job ID: 1752806230104039424
Last Price Increase: 2024-02-14
Automatic offers:

abdulrahuman5196 | Reviewer | 0
dukenv0307 | Contributor | 0

melvin-bot · 2024-01-31T21:29:07Z

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

melvin-bot · 2024-01-31T21:29:07Z

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

melvin-bot · 2024-01-31T21:29:13Z

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

kbecciv · 2024-01-31T21:30:04Z

We think that this bug might be related to #vip-vsb
CC @quinthar

Krishna2323 · 2024-01-31T23:13:36Z

Proposal

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

Compose - The list of users in mentions does not disappear when using the Shift+Enter

What is the root cause of that problem?

When we have both display name and login and when we check !displayText.toLowerCase().includes(searchValue.toLowerCase()) it returns false. Lets assume the search value is Krishna with a space at the end because we entered shift and it creates a space, and the displayText is Krishna [email protected], now because in the display text we have a space after Krishna and the search value is also the same we will not return false from here and the mention will be added to the suggestion list.

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

Lines 153 to 157 in 995902a

    
           const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(detail); 
        
           const displayText = displayName === formatPhoneNumber(detail.login) ? displayName : `${displayName} ${detail.login}`; 
        
           if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) { 
        
               return false; 
        
           }

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

We should update the if check here to return false if we have a empty string at the end, we can modify it like:

if ((searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) || searchValue.endsWith(' ')) {return 
     false;
}

Or we can modify the code here:

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

Lines 226 to 239 in 995902a

    
           const nextState = { 
        
               suggestedMentions: [], 
        
               atSignIndex, 
        
               mentionPrefix: prefix, 
        
           }; 
        
           const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(suggestionWord); 
        
           if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) { 
        
               const suggestions = getMentionOptions(personalDetails, prefix); 
        
               nextState.suggestedMentions = suggestions; 
        
               nextState.shouldShowSuggestionMenu = !_.isEmpty(suggestions); 
        
           }

When the prefix contains empty string at the end, will will set only set nextState.shouldShowSuggestionMenu =false;.

            if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) {
                if (prefix && !prefix.endsWith(' ')) {
                    const suggestions = getMentionOptions(personalDetails, prefix);
                    nextState.suggestedMentions = suggestions;
                    nextState.shouldShowSuggestionMenu = !_.isEmpty(suggestions);
                } else {
                    nextState.shouldShowSuggestionMenu = false;
                }
            }

We can also check like this by using prefix.split(CONST.REGEX.SPACE_OR_EMOJI), like we do here:

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

Lines 203 to 204 in 995902a

    
           const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI); 
        
           const lastWord = _.last(words);

Result

mentions_list_demo.mp4

Tony-MK · 2024-01-31T23:46:04Z

Proposal

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

Compose - The list of users in mentions does not disappear when using the Shift+Enter

What is the root cause of that problem?

We are not handling SHIFT+ENTER in triggerHotkeyActions found in the SuggestionMention component.

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

Lines 110 to 126 in 995902a

    
           if (((!e.shiftKey && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) || e.key === CONST.KEYBOARD_SHORTCUTS.TAB.shortcutKey) && suggestionsExist) { 
        
               e.preventDefault(); 
        
               if (suggestionValues.suggestedMentions.length > 0) { 
        
                   insertSelectedMention(highlightedMentionIndex); 
        
                   return true; 
        
               } 
        
           } 
        
           if (e.key === CONST.KEYBOARD_SHORTCUTS.ESCAPE.shortcutKey) { 
        
               e.preventDefault(); 
        
               if (suggestionsExist) { 
        
                   resetSuggestions(); 
        
               } 
        
               return true; 
        
           }

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

Just like how we handled the ESC shortcut, let's handle the SHIFT+ENTER by inserting the following code snippet in triggerHotkeyActions.

if (e.shiftKey && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && suggestionsExist){
  resetSuggestions();
}

dukenv0307 · 2024-02-01T04:43:49Z

Proposal

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

The list of users in mentions does not disappear when using the Shift+Enter keyboard shortcut.

What is the root cause of that problem?

In here, we're using the value as is without consideration for which line the cursor is on.

Let's say we have this text

@duke
|

(| is cursor location)
It will consider the value to search for as the full @duke\n, so it could still find the users matching duke

This is not right because the user is on a new line, and that line only, should be considered for mentions, this is consistent with what Slack does.

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

In here, we process the value first to get the index of the start of current line where the cursor is at.

So let's say this text:

@duke
@test|
@mention

(The | is the location of the cursor)
We'll only get the @test part of the value and use it subsequently because that's the line where the cursor is on. This is also consistent with Slack's behavior.

This can be done by finding the index of the last new line (\n) character before the selectionEnd, and extract the leftString part from after that index onwards.

const newLineIndex = value.lastIndexOf('\n', selectionEnd - 1);
const leftString = value.substring(newLineIndex + 1, suggestionEndIndex);

What alternative solutions did you explore? (Optional)

In here, do not set the secondToLastWord (keep as undefined) if the word before it (words[words.length - 2]) contains line breaks. Since the line break is in between the lastWord and secondToLastWord, secondToLastWord if of the previous line and shouldn't be considered.

const secondToLastWord = (words[words.length - 2] && words[words.length - 2].includes('\n')) ? undefined : words[words.length - 3];

(Besides \n, there could be other types of line break character, we can account for that as well if we want)

Result

Screen.Recording.2024-02-01.at.11.28.19.AM.mov

abdulrahuman5196 · 2024-02-05T13:53:46Z

Will work on review today

melvin-bot · 2024-02-07T16:00:04Z

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

zanyrenney · 2024-02-07T16:04:35Z

did you review yet please @abdulrahuman5196

zanyrenney · 2024-02-09T18:58:06Z

bump @abdulrahuman5196

abdulrahuman5196 · 2024-02-12T06:23:57Z

Hi, Sorry for the delay reviewing now

abdulrahuman5196 · 2024-02-12T06:54:32Z

The issue can be reproduced with any mentions like @a and just pressing shift + enter.
I had an initial review on the proposals. I would need some more time on this. Will check and update on the progress tomorrow.

melvin-bot · 2024-02-14T15:01:23Z

@abdulrahuman5196 @zanyrenney 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!

melvin-bot · 2024-02-14T16:00:28Z

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

zanyrenney · 2024-02-14T17:35:15Z

hey @abdulrahuman5196 have you been able to look into this in more detail? And review the proposal you think is viable?

abzokhattab · 2024-02-16T09:20:44Z

Proposal

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

When a username with a space is partially typed and followed by Shift + Enter to insert a newline, the mention composer doesn't close as expected.

What is the root cause of that problem?

The root cause is the regular expression used to detect spaces (including newlines) as part of the mention detection logic. This regex incorrectly includes newlines (\n) as part of the space character class (\s) as mentioned here, leading to the mention list component not recognizing the end of a mention context upon newline insertion.

App/src/CONST.ts

Lines 1493 to 1495 in fe4aace

    
           get SPACE_OR_EMOJI() { 
        
               return new RegExp(`(\\s+|(?:${this.EMOJI.source})+)`, 'gu'); 
        
           },

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

Modify the regex so that it matches only spaces and tabs, not newlines, ensuring the mention composer closes correctly upon newline insertion.

       get SPACE_OR_EMOJI() {
           return new RegExp(`([ \\t]+|(?:${this.EMOJI.source})+)`, 'gu');
       },

OR we can only check for spaces as currently we do not have the tab character enabled in the composer

        get SPACE_OR_EMOJI() {
            return new RegExp(`( +|(?:${this.EMOJI.source})+)`, 'gu');
        }

other solutions could be found here as well --> https://stackoverflow.com/questions/3583111/regular-expression-find-spaces-tabs-space-but-not-newlines

finally, we need to remove the /n from the matching in case the user types a @ in the beginning of a line, so we need to change this to:

const replacedWords = _.map(words, (word) => word.replace(/\n@/g, '@'));
const lastWord = _.last(replacedWords);
const secondToLastWord = replacedWords[replacedWords.length - 3];

abzokhattab · 2024-02-16T09:21:13Z

Coming from this issue #36617

please let me know what you think about my proposal @abdulrahuman5196

zanyrenney · 2024-02-16T15:38:46Z

bump @abdulrahuman5196

abdulrahuman5196 · 2024-02-16T16:12:51Z

bump @abdulrahuman5196

I would still recommend the proposal already approved here #35518 (comment) which seems to be better and effective solution.

abdulrahuman5196 · 2024-02-16T16:15:06Z

FYI: Just to make sure its visible.
C+ approved comment is here #35518 (comment)

melvin-bot · 2024-02-16T19:45:35Z

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

Offer link
Upwork job

melvin-bot · 2024-02-16T19:45:43Z

📣 @dukenv0307 🎉 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 📖

abdulrahuman5196 · 2024-02-19T09:05:16Z

Waiting on PR

dukenv0307 · 2024-02-19T09:10:38Z

@abdulrahuman5196 The PR is ready for review.

melvin-bot · 2024-02-27T04:43:48Z

⚠️ 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.

abdulrahuman5196 · 2024-03-05T09:18:49Z

The PR that introduced the bug has been identified. Link to the PR:
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:
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:

Doesn't seem to be regression. It was the same case for sometime.

Determine if we should create a regression test for this bug.

Yes.

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.

Log in under your HT account
Navigate to any conversation
Paste the text "@BOSS" into the Compose Box
Press Shift+Enter 5-6 times
Verify that: the list of users disappears

@zanyrenney Completed checklist and this issue is on payment due for 7th March. Seems melvin didn't update here.

abdulrahuman5196 · 2024-03-23T14:59:49Z

@zanyrenney Bump on the above. Seems this issue is pending for 2 weeks.

zanyrenney · 2024-04-02T11:57:49Z

I've been OOO since payment was due. I will take a look now.

zanyrenney · 2024-04-02T12:00:25Z

@abdulrahuman5196 you ended the contract ?

How come?

If payment was still due, you've now made it impossible for me to pay through the correct workflow 😅

zanyrenney · 2024-04-02T12:01:25Z

payment summary:
@dukenv0307 paid $500 through upwork. 🎉

@abdulrahuman5196 you have ended the contract so not sure how you wanted / expected me to pay?

abdulrahuman5196 · 2024-04-02T12:40:46Z

@zanyrenney Sorry, could have ended it by mistake.

I applied again - https://www.upwork.com/ab/proposals/1775141076017627137?success

zanyrenney · 2024-04-02T14:21:33Z

zanyrenney · 2024-04-02T14:22:05Z

Using a bonus as payment as easier than restarting a new contract

paid @abdulrahuman5196 $500 through Upwork.

kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 31, 2024

melvin-bot bot changed the title ~~Compose - The list of users in mentions does not disappear when using the Shift+Enter~~ [$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter Jan 31, 2024

melvin-bot bot assigned zanyrenney Jan 31, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 31, 2024

melvin-bot bot assigned abdulrahuman5196 Jan 31, 2024

melvin-bot bot added the Overdue label Feb 5, 2024

melvin-bot bot removed the Overdue label Feb 5, 2024

melvin-bot bot added the Overdue label Feb 7, 2024

melvin-bot bot added Overdue and removed Overdue labels Feb 7, 2024

melvin-bot bot removed the Overdue label Feb 9, 2024

melvin-bot bot added the Overdue label Feb 14, 2024

melvin-bot bot assigned jasperhuangg Feb 15, 2024

bernhardoj mentioned this issue Feb 16, 2024

[$500] Chat - Mention suggestion list doesn't close on new line break if @text matches any user name #36617

Closed

6 tasks

jasperhuangg assigned dukenv0307 Feb 16, 2024

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

melvin-bot bot added the Overdue label Feb 19, 2024

dukenv0307 mentioned this issue Feb 19, 2024

fix: The list of users in mentions does not disappear when using the Shift+Enter #36792

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Overdue Daily KSv2 labels Feb 19, 2024

dukenv0307 mentioned this issue Feb 27, 2024

[HOLD for payment 2024-03-07] [$500] Chat - The selected 2nd contact is shown in first line #37250

Closed

6 tasks

zanyrenney closed this as completed Apr 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter #35518

[$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter #35518

kbecciv commented Jan 31, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jan 31, 2024

melvin-bot bot commented Jan 31, 2024

melvin-bot bot commented Jan 31, 2024

kbecciv commented Jan 31, 2024

Krishna2323 commented Jan 31, 2024 •

edited

Loading

Tony-MK commented Jan 31, 2024

dukenv0307 commented Feb 1, 2024

abdulrahuman5196 commented Feb 5, 2024

melvin-bot bot commented Feb 7, 2024

zanyrenney commented Feb 7, 2024

zanyrenney commented Feb 9, 2024

abdulrahuman5196 commented Feb 12, 2024

abdulrahuman5196 commented Feb 12, 2024

melvin-bot bot commented Feb 14, 2024

melvin-bot bot commented Feb 14, 2024

zanyrenney commented Feb 14, 2024

abzokhattab commented Feb 16, 2024 •

edited

Loading

abzokhattab commented Feb 16, 2024 •

edited

Loading

zanyrenney commented Feb 16, 2024

abdulrahuman5196 commented Feb 16, 2024

abdulrahuman5196 commented Feb 16, 2024

melvin-bot bot commented Feb 16, 2024

melvin-bot bot commented Feb 16, 2024

abdulrahuman5196 commented Feb 19, 2024

dukenv0307 commented Feb 19, 2024

melvin-bot bot commented Feb 27, 2024

abdulrahuman5196 commented Mar 5, 2024

abdulrahuman5196 commented Mar 23, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

abdulrahuman5196 commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

[$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter #35518

[$500] Compose - The list of users in mentions does not disappear when using the Shift+Enter #35518

Comments

kbecciv commented Jan 31, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jan 31, 2024

melvin-bot bot commented Jan 31, 2024

melvin-bot bot commented Jan 31, 2024

kbecciv commented Jan 31, 2024

Krishna2323 commented Jan 31, 2024 • edited Loading

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?

Result

Tony-MK commented Jan 31, 2024

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?

dukenv0307 commented Feb 1, 2024

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)

Result

abdulrahuman5196 commented Feb 5, 2024

melvin-bot bot commented Feb 7, 2024

zanyrenney commented Feb 7, 2024

zanyrenney commented Feb 9, 2024

abdulrahuman5196 commented Feb 12, 2024

abdulrahuman5196 commented Feb 12, 2024

melvin-bot bot commented Feb 14, 2024

melvin-bot bot commented Feb 14, 2024

zanyrenney commented Feb 14, 2024

abzokhattab commented Feb 16, 2024 • edited Loading

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?

abzokhattab commented Feb 16, 2024 • edited Loading

zanyrenney commented Feb 16, 2024

abdulrahuman5196 commented Feb 16, 2024

abdulrahuman5196 commented Feb 16, 2024

melvin-bot bot commented Feb 16, 2024

melvin-bot bot commented Feb 16, 2024

abdulrahuman5196 commented Feb 19, 2024

dukenv0307 commented Feb 19, 2024

melvin-bot bot commented Feb 27, 2024

abdulrahuman5196 commented Mar 5, 2024

abdulrahuman5196 commented Mar 23, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

abdulrahuman5196 commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

zanyrenney commented Apr 2, 2024

kbecciv commented Jan 31, 2024 •

edited by melvin-bot bot

Loading

Krishna2323 commented Jan 31, 2024 •

edited

Loading

abzokhattab commented Feb 16, 2024 •

edited

Loading

abzokhattab commented Feb 16, 2024 •

edited

Loading