[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key

[IuliiaHerets]

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.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Search.
3. Click 3-dot menu next to the saved search (save a search if there is no any).
4. Click Delete.
5. Press keyboard Enter.

Expected Result:

User should be able to delete saved search using Enter key.

Actual Result:

User is not able to delete saved search using Enter key.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6608671_1726738796850.bandicam_2024-09-19_17-36-43-268.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836866373768762286
• Upwork Job ID: 1836866373768762286
• Last Price Increase: 2024-09-26
• Automatic offers:
• akinwale | Reviewer | 104162508
• FitseTLT | Contributor | 104162510

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 2

[IuliiaHerets]

@OfstadC FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

Saved search - Unable to delete saved search using Enter key

What is the root cause of that problem?

The yes button has pressOnEnter enabled in confirm content here

App/src/components/ConfirmContent.tsx

Line 202 in 25450d9

pressOnEnter

App/src/components/ConfirmContent.tsx

Line 230 in 25450d9

pressOnEnter

Which would activate listening of Enter key via KeyboardShortcutComponent

App/src/components/Button/index.tsx

Lines 324 to 326 in 25450d9

	{pressOnEnter && (
	<KeyboardShortcutComponent
	isDisabled={isDisabled}

But KeyboardShortcutComponent but key listening is active only if the current screen is focused

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

but in our case the screen that holds the confirm modal is not focused

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

To deal with this kind of exceptions we can allow pressOnEnter buttons inside ConfrimContent to have keyboard shortcut listening activated when the modal isVisible
we can add a new param isActive in KeyboardShortcutComponent and change the condition to

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

            isActive: pressOnEnter && !shouldDisableEnterShortcut && (isFocused || isActive),

and pass down isVisible prop from ConfirmModal here

App/src/components/ConfirmModal.tsx

Line 126 in 25450d9

isVisible,

to ConfirmContent > The two confirm buttons ( with pressOnEnter) inside Confrim Content > KeyboardShortcutComponent

What alternative solutions did you explore? (Optional)

BTW we can also pass the isVisible to be true for confirm buttons in ConfirmContent instead of isVisible because basically the buttons will only appear when the modal is visible on which case the enter keyboard event will be listened

[truph01]

Edited by proposal-police: This proposal was edited at 2024-09-20 03:52:48 UTC.

Proposal

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

• User is not able to delete saved search using Enter key.

What is the root cause of that problem?

• The delete confirm modal is in SearchPageBottomTab:
  

  App/src/pages/Search/SearchPageBottomTab.tsx

  Line 57 in 25450d9

  <SearchTypeMenu queryJSON={queryJSON} />

  
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 253 in b0ce206

  <DeleteConfirmModal />

and its "Delete" button just listen to the "ENTER" event if its parent screen is focused:

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

• Meanwhile, SearchPageBottomTab is always "not focused" in case of large screen, so we never can delete saved search using ENTER key.

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

• We should add the delete confirm modal to Search page instead of SearchPageBottomTab. So the isFocused from useIsFocused will be true. Details bellow:

1. Refactor useDeleteSavedSearch: Currently, that function return both {showDeleteModal, DeleteConfirmModal}. We need to refactor it so that we can use showDeleteModal in SearchPageBottomTab page to open DeleteConfirmModal in Search page.

function DeleteConfirmModal() {
    const {translate} = useLocalize();
    const [hashToDelete] = useOnyx(ONYXKEYS.HASH_TO_DELETE);
    const handleDelete = () => {
        SearchActions.deleteSavedSearch(hashToDelete);
        Onyx.set(ONYXKEYS.HASH_TO_DELETE, null);
        SearchActions.clearAdvancedFilters();
        Navigation.navigate(
            ROUTES.SEARCH_CENTRAL_PANE.getRoute({
                query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.ALL),
            }),
        );
    };
    return (
        <ConfirmModal
            title={translate('search.deleteSavedSearch')}
            onConfirm={handleDelete}
            onCancel={() => Onyx.set(ONYXKEYS.HASH_TO_DELETE, null)}
            isVisible={!!hashToDelete}
            prompt={translate('search.deleteSavedSearchConfirm')}
            confirmText={translate('common.delete')}
            cancelText={translate('common.cancel')}
            danger
        />
    );
}

function useDeleteSavedSearch() {
    const showDeleteModal = (hash: number) => {
        Onyx.set(ONYXKEYS.HASH_TO_DELETE, hash);
    };

    return {showDeleteModal};
}

export {useDeleteSavedSearch, DeleteConfirmModal};

2. Move DeleteConfirmModal to Search page:

• We need to move this code:

App/src/pages/Search/SearchTypeMenu.tsx

Line 253 in b0ce206

<DeleteConfirmModal />

to:

App/src/components/Search/index.tsx

Line 434 in 25450d9

/>

What alternative solutions did you explore? (Optional)

• We can create a DeleteModalContext:

const ConfirmDeleteModalContext = createContext({
    showModal: ()=>{},
    isVisible: false
})

instead of using Onyxkey as main solution.