[HOLD for payment 2024-08-19] [$250] Cannot search for emojis in status page

[m-natarajan]

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: 9.0.8-3
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: @Beamanator
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1721227885988609

Action Performed:

1. Go to settings -> Status
2. Try to add search for an emoji to add for your status

Expected Result:

Should be able to type in the Search and have emojis filter

Actual Result:

Search field disabled and cannot type in Search

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Screen.Recording.2024-07-17.at.7.47.22.AM.mov

Recording.348.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01298542065fc43b99
• Upwork Job ID: 1816515758396555142
• Last Price Increase: 2024-07-25
• Automatic offers:
• situchan | Reviewer | 103345487
• Krishna2323 | Contributor | 103345488

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[FitseTLT]

Proposal

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

Cannot search for emojis in status page

What is the root cause of that problem?

Because we are displaying the popover without overlay here

App/src/components/EmojiPicker/EmojiPicker.tsx

Line 213 in 7ba66a1

withoutOverlay

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

We shouldn't pass withoutOverlay as true, so we should remove this line

App/src/components/EmojiPicker/EmojiPicker.tsx

Line 213 in 7ba66a1

withoutOverlay

Result:

2024-07-18.01-11-24.mp4

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal

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

Cannot search for emojis in status page

What is the root cause of that problem?

The EmojiPicker content isn't wrapped in FocusTrapForModal and due to this the input can't be focused.

App/src/components/EmojiPicker/EmojiPicker.tsx

Lines 198 to 232 in d739580

	<PopoverWithMeasuredContent
	shouldHandleNavigationBack={Browser.isMobileChrome()}
	isVisible={isEmojiPickerVisible}
	onClose={hideEmojiPicker}
	onModalShow={focusEmojiSearchInput}
	onModalHide={onModalHide.current}
	hideModalContentWhileAnimating
	shouldSetModalVisibility={false}
	animationInTiming={1}
	animationOutTiming={1}
	anchorPosition={{
	vertical: emojiPopoverAnchorPosition.vertical,
	horizontal: emojiPopoverAnchorPosition.horizontal,
	}}
	anchorRef={getEmojiPopoverAnchor() as RefObject<View | HTMLDivElement>}
	withoutOverlay
	popoverDimensions={{
	width: CONST.EMOJI_PICKER_SIZE.WIDTH,
	height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
	}}
	anchorAlignment={emojiPopoverAnchorOrigin}
	outerStyle={StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop)}
	innerContainerStyle={styles.popoverInnerContainer}
	anchorDimensions={emojiAnchorDimension.current}
	avoidKeyboard
	shoudSwitchPositionIfOverflow
	shouldEnableNewFocusManagement
	restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
	>
	<EmojiPickerMenu
	onEmojiSelected={selectEmoji}
	activeEmoji={activeEmoji.current}
	ref={(el) => (emojiSearchInput.current = el)}
	/>
	</PopoverWithMeasuredContent>

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

We need to wrap the content inside PopoverWithMeasuredContent with FocusTrapForModal, just like we do in PopoverMenu component.

App/src/components/PopoverMenu.tsx

Lines 203 to 266 in d739580

	<PopoverWithMeasuredContent
	anchorPosition={anchorPosition}
	anchorRef={anchorRef}
	anchorAlignment={anchorAlignment}
	onClose={() => {
	setCurrentMenuItems(menuItems);
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	onClose();
	}}
	isVisible={isVisible}
	onModalHide={onModalHide}
	animationIn={animationIn}
	animationOut={animationOut}
	animationInTiming={animationInTiming}
	disableAnimation={disableAnimation}
	fromSidebarMediumScreen={fromSidebarMediumScreen}
	withoutOverlay={withoutOverlay}
	shouldSetModalVisibility={shouldSetModalVisibility}
	shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
	>
	<FocusTrapForModal active={isVisible}>
	<View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
	{renderHeaderText()}
	{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
	{currentMenuItems.map((item, menuIndex) => (
	<FocusableMenuItem
	// eslint-disable-next-line react/no-array-index-key
	key={`${item.text}_${menuIndex}`}
	icon={item.icon}
	iconWidth={item.iconWidth}
	iconHeight={item.iconHeight}
	iconFill={item.iconFill}
	contentFit={item.contentFit}
	title={item.text}
	titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
	shouldCheckActionAllowedOnPress={false}
	description={item.description}
	numberOfLinesDescription={item.numberOfLinesDescription}
	onPress={() => selectItem(menuIndex)}
	focused={focusedIndex === menuIndex}
	displayInDefaultIconColor={item.displayInDefaultIconColor}
	shouldShowRightIcon={item.shouldShowRightIcon}
	iconRight={item.iconRight}
	shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
	label={item.label}
	isLabelHoverable={item.isLabelHoverable}
	floatRightAvatars={item.floatRightAvatars}
	floatRightAvatarSize={item.floatRightAvatarSize}
	shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
	disabled={item.disabled}
	onFocus={() => setFocusedIndex(menuIndex)}
	success={item.success}
	containerStyle={item.containerStyle}
	shouldRenderTooltip={item.shouldRenderTooltip}
	shouldForceRenderingTooltipLeft={item.shouldForceRenderingTooltipLeft}
	tooltipWrapperStyle={item.tooltipWrapperStyle}
	renderTooltipContent={item.renderTooltipContent}
	numberOfLinesTitle={item.numberOfLinesTitle}
	interactive={item.interactive}
	/>
	))}
	</View>
	</FocusTrapForModal>
	</PopoverWithMeasuredContent>

            <FocusTrapForModal active={isEmojiPickerVisible}>
                <View>
                    <EmojiPickerMenu
                        onEmojiSelected={selectEmoji}
                        activeEmoji={activeEmoji.current}
                        ref={(el) => (emojiSearchInput.current = el)}
                    />
                </View>
            </FocusTrapForModal>

We should also look for this issue in similar popovers.

What alternative solutions did you explore? (Optional)

We can warp the children content with FocusTrapForModal directly in PopoverWithoutOverlay, after that we there will be no need to wrap content FocusTrapForModal separately in components that uses PopoverWithMeasuredContent with withoutOverlay.

We can use shouldEnableNewFocusManagement prop to conditionally wrap children content with FocusTrapForModal in PopoverWithoutOverlay.

Result

input_not_focused_emoji_picker.mp4

[stephanieelliott]

Gonna close this as Not a priority as it does not fit into our current roadmap. May reopen in the future.

[Krishna2323]

@stephanieelliott, I think we should fix this bug. @Beamanator, what's your opinion since you reported the bug?

[mallenexpensify]

I think we should fix, just happened to me. Searching for emoji via text for status updates is common (3 folks reported bug)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01298542065fc43b99

[melvin-bot]

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

[melvin-bot]

@stephanieelliott, @situchan Eep! 4 days overdue now. Issues have feelings too...

[situchan]

reviewing proposals

[stephanieelliott]

Chatted to @mallenexpensify and we are going to slot this in under #vip-vsb

[situchan]

Thanks for the proposals. Can you please add in RCA the reason why this doesn't happen in composer / add reaction emoji picker but only in status page?

[Krishna2323]

@situchan, focus trap is disabled for these screens and this includes SCREENS.REPORT.

Alternatively we can add SCREENS.SETTINGS.PROFILE.STATUS, in this list and that will also fix the issue. But I believe the correct way is to wrap with FocusTrapForModal , like we do with PopoverMenu.

App/src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts

Lines 4 to 40 in f5a3303

	/**
	* Screens displayed in the BottomTab and CentralPane displayed side by side that should not have active
	* focus trap when rendered on a wide screen to allow navigation between them using the keyboard
	*/
	const WIDE_LAYOUT_INACTIVE_SCREENS: string[] = [
	NAVIGATORS.BOTTOM_TAB_NAVIGATOR,
	SCREENS.HOME,
	SCREENS.SETTINGS.ROOT,
	SCREENS.REPORT,
	SCREENS.SETTINGS.PROFILE.ROOT,
	SCREENS.SETTINGS.PREFERENCES.ROOT,
	SCREENS.SETTINGS.SECURITY,
	SCREENS.SETTINGS.WALLET.ROOT,
	SCREENS.SETTINGS.ABOUT,
	SCREENS.SETTINGS.WORKSPACES,
	SCREENS.SETTINGS.SUBSCRIPTION.ROOT,
	SCREENS.WORKSPACE.ACCOUNTING.ROOT,
	SCREENS.WORKSPACE.INITIAL,
	SCREENS.WORKSPACE.PROFILE,
	SCREENS.WORKSPACE.CARD,
	SCREENS.WORKSPACE.WORKFLOWS,
	SCREENS.WORKSPACE.REIMBURSE,
	SCREENS.WORKSPACE.BILLS,
	SCREENS.WORKSPACE.INVOICES,
	SCREENS.WORKSPACE.TRAVEL,
	SCREENS.WORKSPACE.MEMBERS,
	SCREENS.WORKSPACE.CATEGORIES,
	SCREENS.WORKSPACE.MORE_FEATURES,
	SCREENS.WORKSPACE.TAGS,
	SCREENS.WORKSPACE.TAXES,
	SCREENS.WORKSPACE.REPORT_FIELDS,
	SCREENS.WORKSPACE.EXPENSIFY_CARD,
	SCREENS.WORKSPACE.DISTANCE_RATES,
	SCREENS.SEARCH.CENTRAL_PANE,
	SCREENS.SETTINGS.TROUBLESHOOT,
	SCREENS.SETTINGS.SAVE_THE_WORLD,
	];

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@blimpich @stephanieelliott @situchan this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 @situchan 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@situchan, PR ready for review ^

[stephanieelliott]

PR is on staging 🎉

[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 9.0.18-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Cannot search for emojis in status page. #46700

If no regressions arise, payment will be issued on 2024-08-19. 🎊

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

• @Krishna2323 requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Reviewer)

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

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

[stephanieelliott]

Hey @situchan can you please complete the BZ checklist when you get a chance?

[situchan]

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:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR: Add focus trap #39520
• [@situchan] 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: Add focus trap #39520 (review)
• [@situchan] 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
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] 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.

Regression Test Steps

1. Go to settings -> Status > Open emoji picker
2. Verify that input is focused and can be used for searching emojis
3. Verify tab/up/down keys work as expected

[stephanieelliott]

Summarizing payment on this issue:

• Contributor: @Krishna2323 $250 via Upwork - PAID
• Contributor+: @situchan $250 via Upwork - PAID

Upwork job is here: https://www.upwork.com/jobs/~01298542065fc43b99

[stephanieelliott]

Issue for test rail case here: https://github.com/Expensify/Expensify/issues/421648