[HOLD for payment 2024-03-14] [$500] Emoji picker - Highlight is removed from emoji when scrolling up with up key

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v1.4.43-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: https://expensify.testrail.io/index.php?/tests/view/4168711
Issue reported by: Applause - Internal Team

Action Performed:

1. Open emoji picker
2. Press down key till the first two rows of 'Smileys & Emotions' emoji section is hidden
3. Then press up key till you reach the first two rows that were hidden from view

Expected Result:

Highlight should be applied on emoji that the user has navigated too

Actual Result:

Highlight is not applied on emoji that the user has navigated too

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

Bug6385561_1708425146641.Screen_Recording_2024-02-20_at_1.27.07_in_the_afternoon.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b2c7f05245fc734a
• Upwork Job ID: 1760053354078916608
• Last Price Increase: 2024-02-20
• Automatic offers:
• Pujan92 | Contributor | 0
• shubham1206agra | Contributor | 0

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[kbecciv]

@puneetlath I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

Emoji picker - Highlight is removed from emoji when scrolling up with up key

What is the root cause of that problem?

We pass block: 'nearest' to scrollIntoView function, we also have header for each emojis section, due to the header the emoji is not visible.

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

Line 71 in 7430c5f

this.ref.scrollIntoView({block: 'nearest'});

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

Pass block: 'center' or block: 'end' to scrollIntoView function.

this.ref.scrollIntoView({block: 'center'});

Result

Use flatListRef.scrollToIndex({index, animated: true});

    useEffect(() => {
        if (focusedIndex < 0 || !emojiListRef.current) {
            return;
        }
        const calculatedOffset = Math.floor(focusedIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
        scrollTo(emojiListRef, 0, calculatedOffset - CONST.EMOJI_PICKER_HEADER_HEIGHT, false);
    }, [focusedIndex, emojiListRef]);

PS: Minor edits can be made through PR phase.

[melvin-bot]

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

[melvin-bot]

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

[mananjadhav]

@Krishna2323 I did not understand what you mean by Result Use flatListRef.scrollToIndex({index, animated: true});. But overall your proposal looks good. I tested and it worked fine.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.