[HOLD for payment, then close] [$1000] There's a gap between the category picker & category header in EmojiPicker. You can slightly see the emojis in the background when scrolling.

[kavimuru]

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:

1. Open emoji picker & keep scrolling.
2. Observe the gap between category picker & category header to notice the emojis being visible in the background.

In a sense the emojis flicker and bleed through the background of the gap.

Expected result:

There should be no gap & you should not be able to see the emojis behind any views.

Actual Result:

There is a gap between the category picker & category header thus you can briefly see emojis in that gap while scrolling

Workaround:

unknown

Platforms:

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

• iOS / Safari

Version Number: 1.2.74-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

BCSQ2473.MP4

emoji-gap.MP4

Expensify/Expensify Issue URL:
Issue reported by: @priyeshshah11 @aimane-chnaif
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1676670494692149

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013f651b003d7c167a
• Upwork Job ID: 1628542720310022144
• Last Price Increase: 2023-02-22

[MelvinBot]

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

[MelvinBot]

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

[JmillsExpensify]

Please see the linked Slack thread for additional context before you triage the bug report.

[michaelhaxhiu]

First thing on docket tomorrow.

[michaelhaxhiu]

Edit:

Quick summary of timeline on bug reports here:

• On Feb 17 @priyeshshah11 provided a bug report in slack like we usually do.
• However, on Feb 13 @aimane-chnaif actually discovered and posted about this bug in a PR here.
• Both methods of raising a bug with the Expensify team are viable actually. Ideally speaking we should've created a Slack post or GH issue after Aimane's comment in the PR, but that was missed till now (likely because he thought the bug may get fixed in the associated PR)
• So technically @aimane-chnaif raised @priyeshshah11 posted this bug first and will be awarded the bug reporting bonus (after it's fixed)

[michaelhaxhiu]

This bug is indeed reproducibl on latest iOS app version. Not reproducible on other platforms as far as I can see (desktop/web).

The bug is especially reproducible if you quickly scroll, stop, and then slowly scroll between various emoji categories. Basically vary the scroll speed.

[michaelhaxhiu]

Cleaned up the title and body fo this GH so it's ready to be worked on. Going External with this one.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~013f651b003d7c167a

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[patrickcze]

Proposal

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

As per the above bug report the there is a gap between the emoji category picker and the headers in the scrolling list of emojis exposing the emojis behind the header.

What is the root cause of that problem?

After digging into this issue I discovered that this is only occurring on select screen sizes and ratios.

For example I was able to reproduce the issue in chrome when the screen resolution of 390 x 844 (iPhone 12 pro) at 87% scaling.

It seems that the emoji picker headers using a sticky css property can in some instances on smaller screens position them slightly below the category picker. This seems to be related to how sticky headers like those in the emoji picker can have a small bouncing behaviour in different browsers (see chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=734461).

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

Testing locally i have found adding a simple top: -1px to the emojiPickerContainer (

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 471 in 2df7f86

style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}

) resolves the issue on multiple screens tested and does not impact the picker on Web, or mobile adversely. I would suggest this as a fix and can open a PR if this is suitable.

Another option that I have tested and also works is to only modify the emojiHeaderContainer with the same top: -1px css rule (

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 439 in 2df7f86

<View style={styles.emojiHeaderContainer}>

).

This change to top brings the header up just slightly enough to cover the gap that exists and is causing this bug.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[MelvinBot]

📣 @patrickcze! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[s77rt]

@patrickcze Please read the contributing guide and follow the proposal template.

[patrickcze]

Contributor details
Your Expensify account email: patrick.cze@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~013f265d27ca7ef1f3

[patrickcze]

@s77rt unfortunately I don't think there is a good way to have the header slide up 1px to cover the gap while maintaining the full height of the emoji when hovered. I could look at potentially adding padding to the bottom row of each category of emojis but that seems to be a complex solution to the original issue. The category picker change would be a simpler solution

[s77rt]

@patrickcze I'm pretty sure we can still fix this in the category header. Will discuss this internally. In the meantime please check furthermore on how we can fix this with the least changes.

[patrickcze]

@s77rt I have come up with an alternative solution that will resolve the regression without modifying the category selector.

I have drafted the fix in this commit: 7227252

Basically im determining for each emoji in the picker if the next row will be a header, if it is im providing it the same amount of space to increase in size by the the header will move up by. This allows the gap issue to be resolved without the header cutting into the row of emoji above.

Let me know if you think we can move forward with this solution.

[s77rt]

@patrickcze Thanks for the update. Please do not post code diff, proposals should always be in plain English. We will revert the PR for now, still discussing if we should fix this.

[patrickcze]

Proposal

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

As per the above bug report the there is a gap between the emoji category picker and the headers in the scrolling list of emojis exposing the emojis behind the header. After our initial fix a regression was found where the outline of highlighted emojis was cutoff on the rows above headers.

What is the root cause of that problem?

After digging into this issue I discovered that this is only occurring on select screen sizes and ratios.

For example I was able to reproduce the issue in chrome when the screen resolution of 390 x 844 (iPhone 12 pro) at 87% scaling.

It seems that the emoji picker headers using a sticky css property can in some instances on smaller screens position them slightly below the category picker. This seems to be related to how sticky headers like those in the emoji picker can have a small bouncing behaviour in different browsers (see chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=734461).

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

Testing locally i have found adding a simple top: -1px to the emojiPickerContainer (

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 471 in 2df7f86

style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}

) resolves the issue on multiple screens tested and does not impact the picker on Web, or mobile adversely.

To resolve the regression found on windows, I would modify the renderItem function in src/components/EmojiPicker/EmojiPickerMenu/index.js to calculate if the emoji being rendered has a header below it. If it does I would apply an additional emojiItemBottomRow that would add a marginBottom equivalent to the top padding that was added to the emojiHeaderContainer styles.

What alternative solutions did you explore? (Optional)

I have looked at modifying the category selector at the top to extend a pixel downwards and cover the gap but this makes the category picker and the scrolling list of emoji dependent on each other and could lead to future issues if something is inserted between them.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[patrickcze]

@s77rt I formalized the proposal for the fix from the code diff, please let me know if you decide to move forward with this.

[patrickcze]

@s77rt any update on this one?

[s77rt]

@patrickcze Not yet, still waiting for some feedbacks

[MelvinBot]

@patrickcze, @michaelhaxhiu, @s77rt, @thienlnam Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[s77rt]

Not overdue, still discussing internally.

[s77rt]

@patrickcze Thanks for your continuous efforts here. Unfortunately it has been decided to do nothing for this issue. I'm sure you can find more issues to work on, checkout issues with Help Wanted label.

[s77rt]

@michaelhaxhiu @thienlnam Let's close discuss this one. Discussing the next steps...

[patrickcze]

@s77rt thanks for the details, that's really unfortunate that I won't get the opportunity to resolve the regression. The revised proposal above does solve the issue if anyone changes their mind.

[michaelhaxhiu]

Note: we are discussing and almost reached a verdict here. Thanks for your patience.

[michaelhaxhiu]

Just jumping in to provide some more context here. After exploring this further we think the chance for regression/recurrence is high, and thus it's best to close the job.

We still really appreciate the involvement in finding and attempting to fix it! In this case, we will award a 25% payout of the bounty for your efforts since the job was closed during progression.

• $250 = @patrickcze C
• $250 = @s77rt C+
• $250 = @priyeshshah11 bug report (posted on thread in slack here)

Upwork job is here, and I invited everyone = https://www.upwork.com/jobs/~013f651b003d7c167a

[MelvinBot]

@patrickcze, @michaelhaxhiu, @s77rt, @thienlnam Huh... This is 4 days overdue. Who can take care of this?

[s77rt]

I think we are good to close this one?

[MelvinBot]

@patrickcze, @michaelhaxhiu, @s77rt, @thienlnam Whoops! This issue is 2 days overdue. Let's get this updated quick!

[s77rt]

@michaelhaxhiu Can you please close this one

[priyeshshah11]

Hi @michaelhaxhiu, just a friendly reminder that I haven't yet been paid for this. I had accepted the offer but never got paid.

[michaelhaxhiu]

hm weird, i bet it just got lost in the mix after this GH was closed.

[michaelhaxhiu]

sent you an offer for $250, can you DM me when you accept it?