[RUSHAT to complete checklist] [$500] Web - Emoji picker - Holding down on scroll bar and sliding down selects emoji instead of scrolling

[kbecciv]

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: v1.4.18-2
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open a conversation
2. Click on the emoji picker
3. Hold down on the scroll bar on the right of the emoji picker
4. Try to slide down while holding down the scroll bar

Expected Result:

The side bar should be able to scroll down

Actual Result:

Instead of scrolling down the performed action results in selecting the emoji categories

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6327469_1703768696724.emoji_scroll.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0bac704c1843b72
• Upwork Job ID: 1740375313641885696
• Last Price Increase: 2023-12-28

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01c0bac704c1843b72

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ayushjha119]

@kbecciv i can start working on this.... can you assign this to me??

[melvin-bot]

📣 @ayushjha119! 📣
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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[dragnoir]

Proposal

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

Sticky header overlaps scroll bar.

What is the root cause of that problem?

The Sticky header from FlashList overlaps scroll bar.

The 1st part of the scroll bar is overlapped and user can't click on it.

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

Change the style of the StickyHeader children (because we don't have access to style the StickyHeader div) to give space for the scroll bar.

<View  style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.stickyHeaderEmoji : undefined]}>

where StickyHeader is:

stickyHeaderEmoji: {
	position:  'absolute',
	width:  '-webkit-fill-available',
	...spacing.mh4,
},

POC

007.mp4

[dragnoir]

To support all browsers we can use the below:

  width: '100%',
  width: '-webkit-fill-available',
  width: '-mos-available',
  width: 'fill-available',

[jliexpensify]

Can repro, let DB know in #vip-vsb here

[tienifr]

Proposal

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

Instead of scrolling down the performed action results in selecting the emoji categories

What is the root cause of that problem?

The emoji picker header is defined here. It's wrapped into the absolute container

Because this container has 320px width that makes the scroll bar is overlapped -> We can't click on scroll bar

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

Seem like we don't have any direct ways to access the header container so we should change the style of the StickyHeader itself.

1. Add position: 'absolute' to StickyHeader, so the parent will be ignored
2. The width of EmojiPicker on large screen is 320px and 100% on small screen. The width of StickyHeader would be width of EmojiPicker - 32 (32 = marginLeft + marginRight)

so we can calculate the style for StickyHeader as below:

position: 'absolute',
width: isSmallScreenWidth ? windowWidth - 32: 288,
...styles.mh4,

What alternative solutions did you explore? (Optional)

NA

[dragnoir]

@tienifr you are copying my proposal. You're just trying to calculate width with js.

[tienifr]

you are copying my proposal

@dragnoir, I don't think so. The RCA is easy to figure out, the hard part is finding the solution. I believe the best way is to fix StickyHeader's parent style but I can't find it on the documentation. If someone can find the simple way to override the parent style, I believe it will be chosen as the best solution.

You're just trying to calculate width with js

I don't think your solution is good. -webkit-fill-available does not work with all platforms, and width: 100% will break the advantage of styles. mh4. That why I think calculating the width will be better. Let's wait to hear @rushatgabhane's review

[dragnoir]

@tienifr the hard part is how to override the parent absolute position without having access to it.
Assigning absolute position to a child is my idea and the 1st who mentioned it. You jsu calculated width in a different way.

I also mentioned how to make fill for all browsers.

[dragnoir]

@rushatgabhane @jliexpensify I am a new contributor and it's mentioned here

Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. ALL NEW PROPOSALS MUST BE DIFFERENT FROM EXISTING PROPOSALS. The difference should be important, meaningful or considerable.

Also I was watched lots of proposals and I am sure details like how to handle or how the team prefer to calculate width can be discussed throw PR. (Unless the proposal is wrong and it's not the case here)

In my propsal I figured our the route cause problem and as you can see here lots of other developers was not able to figure out how to style the StickyHeader and how to eliminate the absolute position.
My solution, assigning absolute to a child to override the width of an absolute parent, is the main key to solve the issue. And I am sure the second proposal difference is not important, meaningful or considerable as mentioned in the contribution guide.

[tienifr]

-webkit-fill-available does not work with all platforms

@dragnoir Please read my comment carefully 🙏 . How do you know fill-available works for all platforms? I don't see any places in our App (or docs) do like that, it's quite messy.

width: 100% will break the advantage of styles.mh4

Did you check this? I believe putting width: 100% will break the current behavior. I appreciate your time you spent here but I don't agree that you said my change is not important. Your solution doesn't work (width: 100%), so I suggest the way that works for all platforms, why isn't it important?

We're trying to build the supportive society, I'm also glad to colab with you in this issue if my solution is chosen. For now, just wait to hear C+ review. Thanks

[dragnoir]

I believe putting width: 100% will break the current behavior.

Please check how CSS Overriding works.

[melvin-bot]

@rushatgabhane, @jliexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[jliexpensify]

Bump @rushatgabhane for reviews please!

[rushatgabhane]

@dragnoir thank you for the proposal. Your root cause looks good but I'm not a fan of the solution.

[melvin-bot]

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

[melvin-bot]

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

• Fix: remove overlay on emoji top scroll bar #34077

If no regressions arise, payment will be issued on 2024-01-22. 🎊

For reference, here are some details about the assignees on this issue:

• @dragnoir requires payment (Needs manual offer from BZ)
• @rushatgabhane requires payment through NewDot Manual Requests
• @tienifr requires payment (Needs manual offer from BZ)

[melvin-bot]

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:

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

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @dragnoir paid $(AMOUNT) via Upwork (LINK)
• Reviewer: @rushatgabhane owed $500 via NewDot
• ROLE: @tienifr paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@jliexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1740375313641885696/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[jliexpensify]

^ well that is new!

As discussed:

• @dragnoir $250
• @tienifr $250
• @rushatgabhane $500 (request on New.Dot)

Upwork Job

Bump for Rushat to complete the checklist please!

[jliexpensify]

Just awaiting everyone to accept in Upworks and I shall pay out.

[dragnoir]

Thank you. Accepted.

[jliexpensify]

Paying now - p.s. @dragnoir in the future, no need to submit work! We'll pay when the due date has passed.

[jliexpensify]

Paid and job removed.

@rushatgabhane bump to complete the checklist please!

[jliexpensify]

@rushatgabhane bump to complete the checklist

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Migrate EmojiPickerMenu to FlashList #31479

2. 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: https://github.com/Expensify/App/pull/31479/files#r1470459109

3. 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.

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

5. 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 - No

[marcochavezf]

Hi @jliexpensify, I think the checklist was the only pending item here, correct?

[jliexpensify]

Yep @marcochavezf - contributors have been paid and job is now closed.

Checklist is a WIP, so I'll close once Rajat updates it.

[rushatgabhane]

manual request here - https://staging.new.expensify.com/r/3543070728552287

checklist done

[JmillsExpensify]

$500 payment approved for @rushatgabhane based on this summary.