[Feature] Add emoji search to mobile, plug the gap on cross-platform inconsistency

[JmillsExpensify]

Problem

Currently you can search for a specific emoji in the picker on web/desktop, but not in the mobile apps.

Why is this important?

We expect mobile and desktop to have perfect parity, but this is not currently the case.

Solution

Update the mobile emoji picker to also have a search feature

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018350435dc437a500
• Upwork Job ID: 1611497960351657984
• Last Price Increase: 2023-01-06

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @mollfpr (Internal)

[JmillsExpensify]

We're pulling this issue into the public /App repo, so I'm going to copy over some of the more important comments.

First up from @stitesExpensify

For posterity so that I remember when coming back to this:
We use a bottom-docked popover for the emoji picker. This means that we can't use a keyboard avoiding view to move the picker above the keyboard and end up with something like this:

I'm thinking that the solution is going to be either to change the type of modal we use, or somehow detect the keyboard being opened and manually moving the anchor point (which is currently not used for mobile).

[puneetlath]

I think we should just do this like Slack where the modal content gets pushed up along with the keyboard.

RPReplay_Final1673052153.MP4

[shawnborton]

Yup, I agree with you @puneetlath

[JmillsExpensify]

Yeah, agreed. Slack does a nice job there.

[stitesExpensify]

Agreed!

[JmillsExpensify]

Btw, we need to get Margelo to comment on this issue so that we can assign them.

[melvin-bot]

@JmillsExpensify, @puneetlath, @stitesExpensify Eep! 4 days overdue now. Issues have feelings too...

[JmillsExpensify]

Sounds like @hannojg might take this one over. Is that right?

[JmillsExpensify]

Updating this issue since my last comment, as Margelo as focused more on reactions at the moment. @stitesExpensify I've had several engineers reach out asking for something helpful to get involved with. Maybe we put this issue up for grabs in engineering-chat? Did you want to do the honors?

[JmillsExpensify]

Actually scratch that! We have a new Margelo member helping out now. @perunt shall we assign you to this issue as well?

[perunt]

I guess yes. I would be happy to take on this issue

[JmillsExpensify]

Cool, sound good! For clarity, the auto-suggestions for emoji short codes is more valuable in any case. We'll assign you for now, but if someone from our team has a free cycle and would like to pitch it up, we can also go that route as well.

[JmillsExpensify]

Nice one! @perunt make sure to add this payment to the monthly margelo invoice. @stitesExpensify What do you think about regressions? Is there anything we need to test in particular, apart from:

• Making sure search is there
• Searching an emoji works

Anything else?

[perunt]

@JmillsExpensify, in regards to the payment, typically I include the total amount of hours spent on the task in the invoice. However, if there is a specific requirement to include it separately, please let me know, and I will make the necessary adjustments to the invoice accordingly

Regarding testing, apart from making sure the search is functioning and searching for an emoji works, there are a couple of additional considerations:

• Testing the consistency of the modal's height and ensuring it is not overlapped with the Status Bar.
• Verifying that the modal's dimensions remain unchanged when switching between picking an emoji from the list and searching for an emoji.

[stitesExpensify]

Those looks good to me!

[melvin-bot]

@JmillsExpensify, @stitesExpensify, @perunt Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[perunt]

@JmillsExpensify should I add something else to my invoice? I've heard about issues with bounties but have no clue if this is such a task. I've distinguished them by price title.

[melvin-bot]

@JmillsExpensify, @stitesExpensify, @perunt Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[stitesExpensify]

Bump @JmillsExpensify. I don't think anything else needs to be added to the invoice right?

[melvin-bot]

@JmillsExpensify, @stitesExpensify, @perunt Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[JmillsExpensify]

Ah sorry guys! Yes, this should be added to the invoice. As long as you link the GH issue that's great.

[JmillsExpensify]

Regarding the testing steps, do we have anything from the PR that I can copy over for QA?

[stitesExpensify]

1. Create a new account.
2. Open a new chat conversation.
3. Access the emoji picker by clicking on the emoji icon in the chat input field.
4. Make sure the search bar is visible at the top of the emoji picker.
5. Type "hand" in the search bar and verify that the list of emojis is updated to show relevant hand emojis.
6. Change the skin tone of an emoji using the appropriate option.
7. Verify that the skin tone of the selected emoji is updated.
8. Type the random string "handsmsmsm" in the search bar.
9. Verify that the message "No results found" is displayed.
10. Clear the search bar by deleting all text.
11. Verify that the emoji picker returns to its starter state with all emojis visible and the search bar empty.

[melvin-bot]

@JmillsExpensify, @stitesExpensify, @perunt Huh... This is 4 days overdue. Who can take care of this?

[perunt]

@JmillsExpensify I'll know better next time, thanks! I thought only the tasks with 'bounty' in the title should be invoiced separately. I'm still distinguishing them only by their title.

[melvin-bot]

@JmillsExpensify, @stitesExpensify, @perunt Whoops! This issue is 2 days overdue. Let's get this updated quick!

[stitesExpensify]

@JmillsExpensify I posted some test steps that we can copy, and then I think we can close this

[JmillsExpensify]

Forgot to circle back and create the regression issue. Doing that now.

[JmillsExpensify]

Done!