[HOLD for Payment 2024-09-6][$250] clicking enter on emoji selector for status results in leaving status pane

[m-natarajan]

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: 9.0.19-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: @dylanexpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1723475125409519

Action Performed:

1. Head to status
2. Click on emoji selector
3. Search for any emoji
4. When the emoji you want is auto-focused, hit enter

Expected Result:

emoji is selected and window for emoji search disappears

Actual Result:

emoji is not selected, and the RHP for status disappears

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

Recording.435.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d3caa8f59dbe1758
• Upwork Job ID: 1823486563046416835
• Last Price Increase: 2024-08-13
• Automatic offers:
• rayane-djouah | Reviewer | 103586699
• Krishna2323 | Contributor | 103586701

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-12 23:02:25 UTC.

Proposal

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

clicking enter on emoji selector for status results in leaving status pane

What is the root cause of that problem?

Form is submitted because of enter press.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 167 to 176 in adaf5cd

	<FormProvider
	formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
	style={[styles.flexGrow1, styles.flex1]}
	ref={formRef}
	submitButtonText={translate('statusPage.save')}
	submitButtonStyles={[styles.mh5, styles.flexGrow1]}
	onSubmit={updateStatus}
	validate={validateForm}
	enabledWhenOffline
	>

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

We should check if the emoji picker is active or not and if it is we will disable press on enter.

disablePressOnEnter={EmojiPickerAction.isEmojiPickerVisible()}

What alternative solutions did you explore? (Optional)

We can focus on the message input box when the modal hides.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 189 in adaf5cd

onModalHide={() => {}}

onModalHide={() => {
    inputRef.current?.focus();
}}

What alternative solutions did you explore? (Optional 2)

We can use useKeyboardShortcut to capture enter clicks and perform emoji selection.

    useKeyboardShortcut(
        CONST.KEYBOARD_SHORTCUTS.ENTER,
        () => {
            let indexToSelect = focusedIndex;
            if (highlightFirstEmoji) {
                indexToSelect = 0;
            }

            const item = filteredEmojis[indexToSelect];
            if (!item) {
                return;
            }
            if ('types' in item || 'name' in item) {
                const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code;
                onEmojiSelected(emoji, item);
            }
        },
        {isActive: !isEnterWhileComposition(keyBoardEvent), shouldPreventDefault: true, shouldStopPropagation: true},
    );

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

Lines 145 to 164 in 1eef411

	if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
	let indexToSelect = focusedIndex;
	if (highlightFirstEmoji) {
	indexToSelect = 0;
	}
	const item = filteredEmojis[indexToSelect];
	if (!item) {
	return;
	}
	if ('types' in item || 'name' in item) {
	const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code;
	onEmojiSelected(emoji, item);
	}
	// On web, avoid this Enter default input action; otherwise, it will add a new line in the subsequently focused composer.
	keyBoardEvent.preventDefault();
	// On mWeb, avoid propagating this Enter keystroke to Pressable child component; otherwise, it will trigger the onEmojiSelected callback again.
	keyBoardEvent.stopPropagation();
	return;
	}

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-13 04:48:25 UTC.

Proposal

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

Emoji is not selected, and the RHP for status disappears

What is the root cause of that problem?

In FormProvider:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 167 in adaf5cd

<FormProvider

the disablePressOnEnter param is false by default.

When we open emoji picker then press on Enter, the onSubmit function is triggered:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 173 in adaf5cd

onSubmit={updateStatus}

so the RHP is closed.

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

When the emoji picker is showing, we shouldn't trigger updateStatus on Enter:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 98 in adaf5cd

const updateStatus = useCallback(

by adding an early return logic:

            if(EmojiPickerAction.emojiPickerRef.current?.isEmojiPickerVisible){
                return
            }

bellow:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 99 in adaf5cd

({emojiCode, statusText}: FormOnyxValues<typeof ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM>) => {

What alternative solutions did you explore? (Optional)

1. We can create a new state:

    const [isEmojiPickerVisible, setIsEmojiPickerVisible] = useState(false);

2. Then:
   

   App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

   Line 189 in adaf5cd

   onModalHide={() => {}}

   
   will be:

                            onModalHide={() => setIsEmojiPickerVisible(false)}
                            onWillShow={() => setIsEmojiPickerVisible(true)}

3. Then:
   

   App/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

   Line 57 in adaf5cd

   () => {},

   
   will be:

            onWillShow,

4. Then:
   

   App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

   Line 167 in adaf5cd

   <FormProvider

   
   will be:

                disablePressOnEnter={isEmojiPickerVisible}

[daledah]

Proposal updated

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Good catch @dylanexpensify I was able to reproduce. @rayane-djouah , plz review the proposals above.

2024-08-13_15-27-05.mp4