[$500] [HOLD for payment 2023-10-27] EmojiPicker popover in Status picker is not toggle popover

[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!

---

Action Performed:

Pre condition: Make sure you have Beta for status feature

1. Navigate to Profile -> Status -> Set Status
2. Click on emoji Picker.
3. Click again on emoji picker

Expected Result:

Popover should be closed on second click.

Actual Result:

Popover not closed on second click.

Workaround:

Unknown

Platforms:

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

• Android / native - not testable
• Android / Chrome - - not testable
• iOS / native - not testable
• iOS / Safari - - not testable
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.79.3
Reproducible in staging?: n
Reproducible in production?: n
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: Any additional supporting documentation

Screen.Recording.2023-10-08.at.4.07.45.PM.mov

Screen.Recording.2023-10-08.at.4.11.03.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696762051949939

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @greg-schroeder

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a1a8adcfec621295
• Upwork Job ID: 1719655045440290816
• Last Price Increase: 2023-11-01

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue. cc @thienlnam

[melvin-bot]

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

[saranshbalyan-1234]

Proposal

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

EmojiPicker popover in Status picker is not toggle popover

What is the root cause of that problem?

We dont have any condition to hide the EmojiPicker, the code is written just to open the emoji picker.

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Lines 31 to 36 in 0cbee22

	const onPress = () =>
	EmojiPickerAction.showEmojiPicker(props.onModalHide, (emoji) => props.onInputChange(emoji), emojiPopoverAnchor.current, {
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	shiftVertical: 4,
	});

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

Add this code in onPress function in EmojiPickerButtonDropDown.js

            if (EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
            EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
            return;

Result
https://github.com/Expensify/App/assets/57568571/001c31eb-aa2c-4361-a14e-d89f37658e38

What alternative solutions did you explore? (Optional)

N/A

[kbecciv]

Proposal by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696762051949939

Proposal

Problem

EmojiPicker popover in Status picker is not toggle popover

Root Cause

We are not handling the case for closing the popover when dropDown button clicked when popover is open already.

Changes

we need to handle closing the popover when popover is visible in onPress Action on EmojiPickerButtonDropdown.

if(EmojiPickerAction.isEmojiPickerVisible()){               EmojiPickerAction.hideEmojiPicker();
return;
}

We also need to add styles.userSelectNone so that repeadetly clicking the button works as expected everytime else it will select Emoji sometimes.

Screen.Recording.2023-10-08.at.4.34.22.PM.mov

[ZhenjaHorbach]

Proposal

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

EmojiPicker in Status picker is not toggle popover

What is the root cause of that problem?

We do not have conditions that would close the popover and at the moment after pressing the button we always call EmojiPickerAction.showEmojiPicker
Plus We have several other problems related to this button

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

First:
We need an update onPress function

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Lines 31 to 36 in 389d7b0

	const onPress = () =>
	EmojiPickerAction.showEmojiPicker(props.onModalHide, (emoji) => props.onInputChange(emoji), emojiPopoverAnchor.current, {
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	shiftVertical: 4,
	});

How we make it in other places

Like

const onPress = () => {
        if (!EmojiPickerAction.isEmojiPickerVisible()) {
            EmojiPickerAction.showEmojiPicker(
                props.onModalHide,
                (emoji) => props.onInputChange(emoji),
                emojiPopoverAnchor.current,
                {
                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                    shiftVertical: 4,
                },
                () => {},
                'EmojiPickerButtonDropdown' //optional,
            );
        } else {
            EmojiPickerAction.hideEmojiPicker();
        }
    };

Second:
We have an obvious problem if we quickly click on the button
We will сircle the message text
To fix this we can update styles for PressableWithoutFeedback

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 42 in 389d7b0

style={styles.emojiPickerButtonDropdown}

Like
style={[styles.emojiPickerButtonDropdown, styles.userSelectNone]}
Third:
We use the wrong cursor for the button
To fix this we can update accessibilityRole for PressableWithoutFeedback
Because the button is clearly not text

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 47 in 389d7b0

accessibilityRole="text"

Like
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
Fourth(optional):
A strange solution is that when the button is disabled
We change the cursor only for the icon
Although the button is fully clickable
I think we need to move props.disabled && styles.cursorDisabled
From

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 57 in 389d7b0

<View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, styles.rotate90]}>

To

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.js

Line 42 in 389d7b0

style={styles.emojiPickerButtonDropdown}

What alternative solutions did you explore? (Optional)

NA

[ishpaul777]

I reported the wrong cursor issue already along with proposal here https://expensify.slack.com/archives/C049HHMV9SM/p1696763872801869

[melvin-bot]

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

[eVoloshchak]

The fix is quite straightforward, this isn't a bug per se, just a functionality that wasn't implemented in the first place
@ishpaul777's proposal looks good to me

🎀👀🎀 C+ reviewed!