[HOLD for payment 2024-11-01] [$250] Search - Selection persists after the expense is deleted and no expense is selected

[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.42-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. Submit an expense to any user.
3. Go to Search.
4. Select the submitted expense via checkbox.
5. Go back to Inbox.
6. Delete the expense in Step 2.
7. Go to Search.

Expected Result:

The selection should reset because the expense is deleted.

Actual Result:

The dropdown button remains as "1 selected" when the expense is deleted and no expense is selected.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6621388_1727806755633.bandicam_2024-10-02_02-13-52-036.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842230940180729212
• Upwork Job ID: 1842230940180729212
• Last Price Increase: 2024-10-11
• Automatic offers:
• Krishna2323 | Contributor | 104426385

Issue Owner

Current Issue Owner: @OfstadC

[IuliiaHerets]

We think that this bug might be related to #wave-control

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

@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

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-10-11 22:25:51 UTC.

Proposal

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

The selection header is not updated when the search data is changed.

What is the root cause of that problem?

We do not update the selected header text when the search data changes.

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

• in the search page here, we should add a useEffect hook that recalculates the selected text whenever the data changes

const data = searchResults ? SearchUtils.getSections(type, status, searchResults?.data, searchResults?.search) : [];

useEffect(() => {
    // Check if there are any selected transactions before proceeding
    if (!Object.keys(selectedTransactions).length) {
        return; // Exit if no selected transactions
    }

    if (!data || data.length ===0) {
        // Clear selected transactions if there’s no data
        clearSelectedTransactions();
    } else {
        // Create a new object to store the updated transactions
        const updatedTransactions: SelectedTransactions = {};

        // Loop over selected transactions and validate if they exist in the current data
        Object.keys(selectedTransactions).forEach((key) => {
            const transactionExists = data.some((item) => {
                if (SearchUtils.isTransactionListItemType(item)) {
                    return item.keyForList === key;
                } else if (!SearchUtils.isReportActionListItemType(item)) {
                    return item?.transactions?.some((transaction) => transaction.keyForList === key);
                }
                return false;
            });

            // If the transaction exists, keep it in updatedTransactions
            if (transactionExists) {
                updatedTransactions[key] = selectedTransactions[key];
            }
        });

        // Update the context with the new selected transactions and reports
        setSelectedTransactions(updatedTransactions, data);
    }
}, [data]);

• Alternatively, instead of recalculating, we could reset the selected transactions whenever the data changes by using clearSelectedTransactions.
• Now handling the second part of the issue every time the user leaves the Search tab the selected items should be reset, to handle this issue we could clearSelectedTransactions when navigating to the search page here and here.
• However, to make it cleaner, we can create a util function buildQueryAndNavigate in the SearchUtils file that would build the query, clear the transactions, navigate to this query, and then use this function above.
• This way we covered the cases where the data change, in this case, we have to reset/recalculate the selected transaction because it will be outdated, and we also covered the cases where the user navigates to the search page from a page that is not related to the search, in those cases it will be cleared

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal


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

Search - Selection persists after the expense is deleted and no expense is selected

What is the root cause of that problem?

In SearchPage we don't have a effect to clear the selected transactions and to turn off the mobile selection mode when the component unmounts.

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


• We should clear the selected transactions and turn off the mobile selection mode when the component unmounts.

    useEffect(
        () => () => {
            clearSelectedTransactions();
            turnOffMobileSelectionMode();
        },
        [isFocused, clearSelectedTransactions],
    );

Optional: We can call urnOffMobileSelectionMode(); after checking selectionMode?.isEnabled

What alternative solutions did you explore? (Optional)

• We can use navigation.addListener('beforeRemove').
• With or without the main solution we can also do the same when component mounts.

What alternative solutions did you explore? (Optional 2)

• If we want to keep the selection when user stays on the search page then we can add a isSearchTopmostCentralPane() check before removing the selected transactions.

    useEffect(
        () => () => {
            if (isSearchTopmostCentralPane()) {
                return;
            }
            clearSelectedTransactions();
            turnOffMobileSelectionMode();
        },
        [isFocused, clearSelectedTransactions],
    );

Result

Monosnap.screencast.2024-10-13.19-30-26.mp4

[huult]

Proposal

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

Selection persists after the expense is deleted and no expense is selected

What is the root cause of that problem?

We do not update selectedTransactionsData when deleting one or multiple expenses.

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

We should update selectedTransactionsData when deleting an expense to keep it up to date, something like this:

// add function to update `selectedTransactionsData`
// .src/components/Search/SearchContext.tsx#L56
+    const updateSelectedTransactions = useCallback((selectedTransactions: SelectedTransactions) => {
+        setSearchContextData((prevState) => ({
+            ...prevState,
+            selectedTransactions,
+        }));
+    }, []);

// .src/components/Search/SearchContext.tsx#L56
 const searchContext = useMemo<SearchContext>(
        () => ({
        ...
+     updateSelectedTransactions

// Update function delete expense
// .src/pages/ReportDetailsPage.tsx#L718
+  const {selectedTransactions, updateSelectedTransactions, clearSelectedTransactions} = useSearchContext();

// .src/pages/ReportDetailsPage.tsx#L734
const deleteTransaction = useCallback(() => {
...
+        const updateSelectedTransactionsData = Object.keys(selectedTransactions)
+                .filter((key) => String(key) !== String(iouTransactionID)) // Ensure both are strings for comparison
+                .reduce((obj, key) => {
+                    obj[key] = selectedTransactions[key];
+                    return obj;
+                }, {});

+            if (!Object.keys(updateSelectedTransactionsData).length) {
+                clearSelectedTransactions();
+            } else {
+               updateSelectedTransactions(updateSelectedTransactionsData);
+            }
       navigateBackToAfterDelete.current = IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, 
       isSingleTransactionView);

We will create this logic to handle updating selectedTransactions in a common way and find where an expense is deleted to call it, so we can update other components like MoneyReportHeader.

Note: We can optimize updateSelectedTransactions by passing iouTransactionID as a parameter to handle the update logic, and the component can simply call it and send the parameters. For example:

    // ReportDetailsPage.tsx or MoneyReportHeader.tsx
    updateSelectedTransactions(iouTransactionID);
    // SearchContext.tsx
    const updateSelectedTransactions = useCallback((iouTransactionID: string) => {
        const updateSelectedTransactionsData = Object.keys(searchContextData.selectedTransactions)
            .filter((key) => String(key) !== String(iouTransactionID)) // Ensure both are strings for comparison
            .reduce((obj, key) => {
                obj[key] = searchContext.selectedTransactions[key];
                return obj;
            }, {});

        setSearchContextData((prevState) => ({
            ...prevState,
            selectedTransactions: updateSelectedTransactionsData,
        }));
    }, []);

Details

POC

Screen.Recording.2024-10-02.at.17.40.26.mp4

[melvin-bot]

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