[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 contributors@expensify.com 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)