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

m-natarajan · 2024-07-17T19:08:31Z

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:

Go to settings -> Status
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?

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 · 2024-07-17T19:08:39Z

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 · 2024-07-17T22:12:30Z

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 · 2024-07-18T00:30:25Z

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 · 2024-07-22T14:42:40Z

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

Krishna2323 · 2024-07-22T15:30:58Z

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

mallenexpensify · 2024-07-25T16:47:50Z

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 · 2024-07-25T16:48:03Z

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

melvin-bot · 2024-07-25T16:48:08Z

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

melvin-bot · 2024-07-30T18:16:30Z

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

situchan · 2024-07-30T18:23:19Z

reviewing proposals

stephanieelliott · 2024-07-30T20:26:28Z

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

situchan · 2024-07-30T21:32:59Z

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 · 2024-07-30T21:44:51Z

@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, 
        
           ];

situchan · 2024-07-31T08:34:00Z

@Krishna2323's proposal (main solution) looks good. I also agree with alternative solution but for regression free, let's just fix this specific modal for now.
@FitseTLT I don't think we should make it overlay modal back.
🎀👀🎀 C+ reviewed

melvin-bot · 2024-07-31T08:34:12Z

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

melvin-bot · 2024-07-31T18:04:15Z

@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 · 2024-07-31T18:27:26Z

📣 @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 · 2024-07-31T18:27:30Z

📣 @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 · 2024-08-02T08:32:07Z

@situchan, PR ready for review ^

stephanieelliott · 2024-08-08T03:04:25Z

PR is on staging 🎉

melvin-bot · 2024-08-12T09:53:44Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2024-08-12T09:53:50Z

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 · 2024-08-12T09:53:51Z

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 · 2024-08-16T01:10:42Z

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

situchan · 2024-08-19T05:28:16Z

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

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

stephanieelliott · 2024-08-20T08:45:38Z

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 · 2024-08-20T08:45:47Z

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

m-natarajan added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jul 17, 2024

melvin-bot bot assigned stephanieelliott Jul 17, 2024

melvin-bot bot added the Overdue label Jul 19, 2024

melvin-bot bot removed the Overdue label Jul 22, 2024

stephanieelliott added Overdue Not a priority labels Jul 22, 2024

stephanieelliott closed this as completed Jul 22, 2024

melvin-bot bot removed the Overdue label Jul 22, 2024

mallenexpensify reopened this Jul 25, 2024

mallenexpensify added the External Added to denote the issue can be worked on by a contributor label Jul 25, 2024

melvin-bot bot changed the title ~~Cannot search for emojis in status page~~ [$250] Cannot search for emojis in status page Jul 25, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 25, 2024

melvin-bot bot assigned situchan Jul 25, 2024

melvin-bot bot added the Overdue label Jul 30, 2024

melvin-bot bot removed the Overdue label Jul 30, 2024

blimpich assigned Krishna2323 Jul 31, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 31, 2024

Krishna2323 mentioned this issue Aug 2, 2024

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

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Aug 2, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Aug 12, 2024

melvin-bot bot changed the title ~~[$250] Cannot search for emojis in status page~~ [HOLD for payment 2024-08-19] [$250] Cannot search for emojis in status page Aug 12, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Aug 12, 2024

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Aug 18, 2024

situchan mentioned this issue Aug 19, 2024

Add focus trap #39520

Merged

50 tasks

melvin-bot bot removed the Overdue label Aug 20, 2024

stephanieelliott closed this as completed Aug 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

m-natarajan commented Jul 17, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 17, 2024

FitseTLT commented Jul 17, 2024

Krishna2323 commented Jul 18, 2024 •

edited

Loading

stephanieelliott commented Jul 22, 2024

Krishna2323 commented Jul 22, 2024

mallenexpensify commented Jul 25, 2024

melvin-bot bot commented Jul 25, 2024

melvin-bot bot commented Jul 25, 2024

melvin-bot bot commented Jul 30, 2024

situchan commented Jul 30, 2024

stephanieelliott commented Jul 30, 2024

situchan commented Jul 30, 2024

Krishna2323 commented Jul 30, 2024 •

edited

Loading

situchan commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

Krishna2323 commented Aug 2, 2024

stephanieelliott commented Aug 8, 2024

melvin-bot bot commented Aug 12, 2024

melvin-bot bot commented Aug 12, 2024

melvin-bot bot commented Aug 12, 2024 •

edited by stephanieelliott

Loading

stephanieelliott commented Aug 16, 2024

situchan commented Aug 19, 2024

stephanieelliott commented Aug 20, 2024

stephanieelliott commented Aug 20, 2024

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

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

Comments

m-natarajan commented Jul 17, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jul 17, 2024

FitseTLT commented Jul 17, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented Jul 18, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

stephanieelliott commented Jul 22, 2024

Krishna2323 commented Jul 22, 2024

mallenexpensify commented Jul 25, 2024

melvin-bot bot commented Jul 25, 2024

melvin-bot bot commented Jul 25, 2024

melvin-bot bot commented Jul 30, 2024

situchan commented Jul 30, 2024

stephanieelliott commented Jul 30, 2024

situchan commented Jul 30, 2024

Krishna2323 commented Jul 30, 2024 • edited Loading

situchan commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

melvin-bot bot commented Jul 31, 2024

Krishna2323 commented Aug 2, 2024

stephanieelliott commented Aug 8, 2024

melvin-bot bot commented Aug 12, 2024

melvin-bot bot commented Aug 12, 2024

melvin-bot bot commented Aug 12, 2024 • edited by stephanieelliott Loading

stephanieelliott commented Aug 16, 2024

situchan commented Aug 19, 2024

Regression Test Steps

stephanieelliott commented Aug 20, 2024

stephanieelliott commented Aug 20, 2024

m-natarajan commented Jul 17, 2024 •

edited by melvin-bot bot

Loading

Krishna2323 commented Jul 18, 2024 •

edited

Loading

Krishna2323 commented Jul 30, 2024 •

edited

Loading

melvin-bot bot commented Aug 12, 2024 •

edited by stephanieelliott

Loading