[MOCK] Web - Emoji picker - Holding down on scroll bar and sliding down selects emoji instead of scrolling

[ikevin127]

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

[ikevin127]

dragnoir's proposal

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

https://github.com/Expensify/App/assets/12425932/3408a550-4dd6-480f-8af7-374a89805569

[ikevin127]

tienifr's proposal

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