[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

kavimuru · 2023-03-28T16:34:18Z

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:

Go to any report, try to type any emoji.
Move the cursor in front of that emoji, try to type another emoji.
Notice that the emoji text is not highlighted in emoji suggestion popup.

Expected Result:

The emoji text should be highlighted.

Actual Result:

The emoji text is not highlighted in emoji suggestion popup.

Workaround:

unknown

Platforms:

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

Version Number: 1.2.90-7
Reproducible in staging?: y
Reproducible in production?: y
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

RPReplay_Final1679987714.MP4

HYDV7758.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1679990049275629

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01317ca88636cf5943
Upwork Job ID: 1642846462865195008
Last Price Increase: 2023-04-17

MelvinBot · 2023-03-28T16:34:28Z

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

MelvinBot · 2023-03-28T16:34:36Z

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

MelvinBot · 2023-04-03T09:40:17Z

@laurenreidexpensify Huh... This is 4 days overdue. Who can take care of this?

laurenreidexpensify · 2023-04-03T11:08:02Z

Reproduced this on Mac OS Chrome too

MelvinBot · 2023-04-03T11:08:17Z

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

MelvinBot · 2023-04-03T11:08:21Z

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

MelvinBot · 2023-04-03T11:08:30Z

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

MelvinBot · 2023-04-03T11:08:37Z

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

dukenv0307 · 2023-04-03T11:08:38Z

Proposal

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

Emoji suggestion doesn’t highlight the text in front of another emoji

What is the root cause of that problem? (Original Bug)

We are using this logic to get the prefix

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

Line 915 in d8657ba

prefix={this.state.value.slice(this.state.colonIndex + 1).split(' ')[0]}

Note: We are getting the prefix by getting all characters between the colon index and the first space index

So that in this case the prefix will be smi😄 so that the suggestion is not highlighted because it does not match to the prefix

What is the root cause of that problem? (Bug is mentioned here)

We are splitting the leftText by space or new line

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

Lines 431 to 434 in 71b6b1a

    
           isEmojiCode(str, pos) { 
        
               const leftWords = str.slice(0, pos).split(CONST.REGEX.NEW_LINE_OR_WHITE_SPACE); 
        
               const leftWord = _.last(leftWords);

So that, if the before of the cursor is emoji, it will not be splitted

What changes do you think we should make in order to solve the problem? (Original Bug)

We should replace the logic to get the prefix by getting all characters between the colon index and the cursor index like this

prefix={this.state.value.slice(this.state.colonIndex + 1, this.state.selection.start)}

What changes do you think we should make in order to solve the problem? (Bug is mentioned here)

We should use new regex to check all space, new line and emoji like that:
NEW_LINE_OR_WHITE_SPACE_OR_EMOJI: /([\uD800-\uDBFF][\uDC00-\uDFFF]|[\n\s])/g,

And use it replace the old regex
const leftWords = str.slice(0, pos).split(CONST.REGEX.NEW_LINE_OR_WHITE_SPACE_OR_EMOJI);

My solution will make behavior similar to slack:
😄:smi --> display suggestion list
text:smi --> don't display suggestion list
assssdw?:smi --> don't display suggestion list

What alternative solutions did you explore? (Optional)

NA

Pujan92 · 2023-04-03T11:09:06Z

Proposal

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

Emoji suggestion matched string is not highlighting if it is getting added before the emoji

What is the root cause of that problem?

The prefix prop which we are passing to the EmojiSuggestions component is incorrect which seems to pass extra characters even though the selection end(cursor) isn't includes those chars indexes.

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

Line 915 in 752ac61

prefix={this.state.value.slice(this.state.colonIndex + 1).split(' ')[0]}

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

Need to correct prefix prop value which considers the selection end index as the 2nd parameter for the slice and that won't includes the characters after the selection end index.

prefix={this.state.value.slice(this.state.colonIndex + 1, this.state.selection.end)}

For not showing the emoji suggestions between and after emojis, below changes may required.

We do have last colon index before the cursor position here

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

Lines 398 to 400 in cdcb335

    
           const leftString = this.state.value.substring(0, this.state.selection.end); 
        
           const colonIndex = leftString.lastIndexOf(':'); 
        
           const isCurrentlyShowingEmojiSuggestion = this.isEmojiCode(this.state.value, this.state.selection.end);

In the isEmojiCode we can pass that last colon index and make that function simpler by only considering the pos and lastColonIndex difference.

const isCurrentlyShowingEmojiSuggestion = this.isEmojiCode(this.state.value, colonIndex, this.state.selection.end);

isEmojiCode(str, colonIndex, pos) {
        if (colonIndex !== -1) {
            return pos - colonIndex > 2;
        }
        return false;
}

Bcoz we only need to consider lastColonIndex before the cursor position till cursor position index to show emoji suggestions. So we can take out extra logic which is to find all the words and take last word, then check whether it starts with colon and its length.

Result

Screen.Recording.2023-04-10.at.9.39.15.PM.mov

ahmedGaber93 · 2023-04-04T16:08:59Z

Proposal

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

emoji text is not highlighted in emoji suggestion popup if is following with onther one without whitespace.

What is the root cause of that problem?

case 1 text before emoji

prefix format depond on whitespace split(' ')

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

Line 915 in 752ac61

prefix={this.state.value.slice(this.state.colonIndex + 1).split(' ')[0]}

case 2 text after emoji

isEmojiCode depond on split text by whitespace or new line
isEmojiCode("😄:smi", 6) return false see explation

    isEmojiCode(str, pos) {
        const leftWords = str.slice(0, pos).split(CONST.REGEX.NEW_LINE_OR_WHITE_SPACE); 
        // return ["😄:smi"] not [":smi"]
        
        const leftWord = _.last(leftWords);
        // return "😄:smi" not ":smi"
        
        //CONST.REGEX.HAS_COLON_ONLY_AT_THE_BEGINNING will failed becauze text not start with ":"
        return CONST.REGEX.HAS_COLON_ONLY_AT_THE_BEGINNING.test(leftWord) && leftWord.length > 2;
    }

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

case 1 text before emoji

split text with Any non-word character split(/[^\w]/)

// split using Any non-word character [^a-zA-Z0-9_]
prefix={this.state.value.slice(this.state.colonIndex + 1).split(/[^\w]/)[0]}

case 2 text after emoji

    isEmojiCode(str, pos) {
       // split using Any non-word character expect ":" [^a-zA-Z0-9_:] 
        const leftWords = str.slice(0, pos).split(/[^\w:]/);
        const leftWord = _.last(leftWords);

        return CONST.REGEX.HAS_COLON_ONLY_AT_THE_BEGINNING.test(leftWord) && leftWord.length > 2;
    }

What alternative solutions did you explore? (Optional)

Santhosh-Sellavel · 2023-04-04T20:16:00Z

Will check this tomorrow

laurenreidexpensify · 2023-04-07T10:11:14Z

@Santhosh-Sellavel bump ^^

Santhosh-Sellavel · 2023-04-07T14:28:05Z

Ah missed this one will get it today, thanks for the bump!

Santhosh-Sellavel · 2023-04-07T18:19:28Z

Emoji suggestions are not shown if typed shorthand immediately after the emoji or between Emojis

Screen.Recording.2023-04-07.at.11.47.10.PM.mov

None of the proposals address all the cases here.

dukenv0307 · 2023-04-18T02:59:19Z

Hi @Santhosh-Sellavel @PauloGasparSv The PR is ready for review

laurenreidexpensify · 2023-04-18T12:31:24Z

@dukenv0307 can you confirm you've also applied to the job on Upwork? If so, can you confirm you name so I hire the correct person :) ? Thanks

dukenv0307 · 2023-04-18T12:43:49Z

@laurenreidexpensify I've applied, here's my profile https://www.upwork.com/freelancers/~01f5cbe690701118a2
Thanks!

Pujan92 · 2023-04-18T13:44:40Z

@Santhosh-Sellavel @PauloGasparSv just to confirm a point, are we following fully Slack/GitHub emoji suggestions feature? asking bcoz there we don't see suggestions if the selection/cursor position changes. It only shows the suggestions on input text changes.

Santhosh-Sellavel · 2023-04-18T14:47:40Z

@Santhosh-Sellavel @PauloGasparSv just to confirm a point, are we following fully Slack/GitHub emoji suggestions feature? asking bcoz there we don't see suggestions if the selection/cursor position changes. It only shows the suggestions on input text changes.

if the selection goes out the minimum length for the suggestion list or we are hiding the list, So I don't see any problem here when moving within the keyword IMO find it useful here.

cc: @PauloGasparSv your thoughts here?

PauloGasparSv · 2023-04-18T17:47:25Z

cc: @PauloGasparSv your thoughts here?

I also think that's ok! We usually use Slack and other tools to base ourselves and check how we should implement the feature but I also think it works fine the way it was proposed so IMO we should try that : )

Reviewing the P.R. here

Pujan92 · 2023-04-18T17:56:58Z

Thanks for confirming. :)

laurenreidexpensify · 2023-04-19T10:36:34Z

thanks @dukenv0307 = hired!

MelvinBot · 2023-04-26T05:32:48Z

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

MelvinBot · 2023-04-26T05:32:50Z

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

Update regex to split leftword and prefix to highlight #17551

If no regressions arise, payment will be issued on 2023-05-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

MelvinBot · 2023-04-26T05:32:53Z

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:

[@Santhosh-Sellavel] The PR that introduced the bug has been identified. Link to the PR:
[@Santhosh-Sellavel] 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:
[@Santhosh-Sellavel] 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:
[@Santhosh-Sellavel] Determine if we should create a regression test for this bug.
[@Santhosh-Sellavel] 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.
[@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

laurenreidexpensify · 2023-05-03T13:25:50Z

Everyone has been paid - waiting on @Santhosh-Sellavel summary for next steps re: regression testing :)

Santhosh-Sellavel · 2023-05-03T18:03:51Z

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:

[@Santhosh-Sellavel] The PR that introduced the bug has been identified. Link to the PR: Static emoji autosuggestion #14686

[@Santhosh-Sellavel] 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: Static emoji autosuggestion #14686 (comment)

[@Santhosh-Sellavel] 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: N/A No need for updating Checklist here.

[@Santhosh-Sellavel] Determine if we should create a regression test for this bug.

[@Santhosh-Sellavel] 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. [HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626 (comment)

[@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/281002

cc: @PauloGasparSv if you differ let me know.

Santhosh-Sellavel · 2023-05-03T18:06:13Z

Regression steps

From the PR itself looks good to me

Go to any report, and try to type any emoji.
Move the cursor in front of that emoji, and try to type another emoji.
Verify that the emoji text is highlighted in the emoji suggestion popup.
Move the cursor right after an emoji, and try to type another emoji.
Verify that the emoji suggestion still displays

👍 or 👎

cc: @PauloGasparSv @laurenreidexpensify

PauloGasparSv · 2023-05-03T18:12:41Z

Sounds good to me @Santhosh-Sellavel!

I also think we should mention how to type the emoji directly in the composer box so people don't confuse the steps with opening the Emoji picker.

What do you think of the following?

Go to any report, and type any emoji in the composer box (you can do that by first typing a comma : and then the emoji name like :smile: the choosing an emoji).
Move the cursor in front of that emoji, and try to type another emoji the same way.
Verify that the emoji text is highlighted correctly in the emoji suggestion popup.
Move the cursor right after an emoji, and try to type another emoji.
Verify that the emoji suggestion is still highlighted and displayed correctly.

Santhosh-Sellavel · 2023-05-03T18:32:46Z

Much better Sorry I missed that, seems @dukenv0307 missed adding our suggestion here.

Santhosh-Sellavel · 2023-05-03T18:33:24Z

All yours @laurenreidexpensify!

laurenreidexpensify · 2023-05-04T09:11:02Z

Great, all steps complete, closing. Nice job everyone!

kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 28, 2023

melvin-bot bot assigned laurenreidexpensify Mar 28, 2023

tienifr mentioned this issue Mar 29, 2023

Static emoji autosuggestion #14686

Merged

54 tasks

melvin-bot bot added the Overdue label Mar 31, 2023

laurenreidexpensify changed the title ~~Emoji suggestion doesn’t highlight the text in front of another emoji~~ iOS Emoji suggestion doesn’t highlight the text in front of another emoji Apr 3, 2023

laurenreidexpensify changed the title ~~iOS Emoji suggestion doesn’t highlight the text in front of another emoji~~ Emoji suggestion doesn’t highlight the text in front of another emoji Apr 3, 2023

melvin-bot bot removed the Overdue label Apr 3, 2023

laurenreidexpensify added the External Added to denote the issue can be worked on by a contributor label Apr 3, 2023

melvin-bot bot changed the title ~~Emoji suggestion doesn’t highlight the text in front of another emoji~~ [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji Apr 3, 2023

melvin-bot bot assigned Santhosh-Sellavel Apr 3, 2023

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

melvin-bot bot assigned PauloGasparSv Apr 3, 2023

melvin-bot bot added the Overdue label Apr 7, 2023

melvin-bot bot removed the Overdue label Apr 7, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Daily KSv2 labels Apr 26, 2023

melvin-bot bot changed the title ~~[$1000] Emoji suggestion doesn’t highlight the text in front of another emoji~~ [HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji Apr 26, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Apr 26, 2023

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 Daily KSv2 labels May 2, 2023

melvin-bot bot added the Reviewing Has a PR in review label May 4, 2023

laurenreidexpensify closed this as completed May 4, 2023

dukenv0307 mentioned this issue May 15, 2023

[HOLD for payment 2023-05-29] [$1000] Contact suggestion focus/selection does not reset after selecting a contact #18844

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

kavimuru commented Mar 28, 2023 •

edited by melvin-bot bot

Loading

MelvinBot commented Mar 28, 2023

MelvinBot commented Mar 28, 2023 •

edited by laurenreidexpensify

Loading

MelvinBot commented Apr 3, 2023

laurenreidexpensify commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

dukenv0307 commented Apr 3, 2023 •

edited

Loading

Pujan92 commented Apr 3, 2023 •

edited

Loading

ahmedGaber93 commented Apr 4, 2023 •

edited

Loading

Santhosh-Sellavel commented Apr 4, 2023

laurenreidexpensify commented Apr 7, 2023

Santhosh-Sellavel commented Apr 7, 2023

Santhosh-Sellavel commented Apr 7, 2023

dukenv0307 commented Apr 18, 2023

laurenreidexpensify commented Apr 18, 2023

dukenv0307 commented Apr 18, 2023

Pujan92 commented Apr 18, 2023

Santhosh-Sellavel commented Apr 18, 2023

PauloGasparSv commented Apr 18, 2023

Pujan92 commented Apr 18, 2023 •

edited

Loading

laurenreidexpensify commented Apr 19, 2023

MelvinBot commented Apr 26, 2023

MelvinBot commented Apr 26, 2023 •

edited by laurenreidexpensify

Loading

MelvinBot commented Apr 26, 2023

laurenreidexpensify commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023 •

edited by laurenreidexpensify

Loading

Santhosh-Sellavel commented May 3, 2023

PauloGasparSv commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023

laurenreidexpensify commented May 4, 2023

[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

Comments

kavimuru commented Mar 28, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

MelvinBot commented Mar 28, 2023

MelvinBot commented Mar 28, 2023 • edited by laurenreidexpensify Loading

Bug0 Triage Checklist (Main S/O)

MelvinBot commented Apr 3, 2023

laurenreidexpensify commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

MelvinBot commented Apr 3, 2023

dukenv0307 commented Apr 3, 2023 • 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? (Original Bug)

What is the root cause of that problem? (Bug is mentioned here)

What changes do you think we should make in order to solve the problem? (Original Bug)

What changes do you think we should make in order to solve the problem? (Bug is mentioned here)

What alternative solutions did you explore? (Optional)

Pujan92 commented Apr 3, 2023 • 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?

ahmedGaber93 commented Apr 4, 2023 • 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?

case 1 text before emoji

case 2 text after emoji

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

case 1 text before emoji

case 2 text after emoji

What alternative solutions did you explore? (Optional)

Santhosh-Sellavel commented Apr 4, 2023

laurenreidexpensify commented Apr 7, 2023

Santhosh-Sellavel commented Apr 7, 2023

Santhosh-Sellavel commented Apr 7, 2023

dukenv0307 commented Apr 18, 2023

laurenreidexpensify commented Apr 18, 2023

dukenv0307 commented Apr 18, 2023

Pujan92 commented Apr 18, 2023

Santhosh-Sellavel commented Apr 18, 2023

PauloGasparSv commented Apr 18, 2023

Pujan92 commented Apr 18, 2023 • edited Loading

laurenreidexpensify commented Apr 19, 2023

MelvinBot commented Apr 26, 2023

MelvinBot commented Apr 26, 2023 • edited by laurenreidexpensify Loading

MelvinBot commented Apr 26, 2023

laurenreidexpensify commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023 • edited by laurenreidexpensify Loading

Santhosh-Sellavel commented May 3, 2023

PauloGasparSv commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023

laurenreidexpensify commented May 4, 2023

kavimuru commented Mar 28, 2023 •

edited by melvin-bot bot

Loading

MelvinBot commented Mar 28, 2023 •

edited by laurenreidexpensify

Loading

dukenv0307 commented Apr 3, 2023 •

edited

Loading

Pujan92 commented Apr 3, 2023 •

edited

Loading

ahmedGaber93 commented Apr 4, 2023 •

edited

Loading

Pujan92 commented Apr 18, 2023 •

edited

Loading

MelvinBot commented Apr 26, 2023 •

edited by laurenreidexpensify

Loading

Santhosh-Sellavel commented May 3, 2023 •

edited by laurenreidexpensify

Loading