fix: reset table selection when navigating away from index page (#9140)

Fixes #9132 

## Purpose
Currently, when navigating away from an index page and returning,
previously checked selections remain checked. This fix ensures the
selection context is properly reset on navigation.

## Changes
- Add `RecordIndexResetSelectionEffect` component to handle selection
cleanup
- Integrate effect into `RecordIndexPage`
- Uses existing `useResetTableRowSelection` hook to clear selections

## Testing
1. Go to any index page (e.g., Companies)
2. Select some records using checkboxes
3. Navigate to a detail page
4. Return to the index page
5. Verify that no records are selected

## Demo
I've recorded a short video demonstrating how this PR fixes the issue:

[Loom Video
Link](https://www.loom.com/share/72ca46a5dc194b5092e1944a985fa0d2?sid=55c95d8b-2376-4ac5-b406-6483aa7e341f)

Before fix: Selections persist after navigation
After fix: Selections are properly reset

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Samyak Piya
2025-01-11 05:23:07 -05:00
committed by GitHub
parent 9ed9b310f7
commit ba77091b06
2 changed files with 26 additions and 2 deletions

View File

@ -1,5 +1,10 @@
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
matchPath,
useLocation,
useNavigate,
useParams,
} from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import {
@ -8,6 +13,8 @@ import {
} from '@/analytics/hooks/useEventTracker';
import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { AppBasePath } from '@/types/AppBasePath';
import { AppPath } from '@/types/AppPath';
@ -38,6 +45,13 @@ export const PageChangeEffect = () => {
const eventTracker = useEventTracker();
//TODO: refactor useResetTableRowSelection hook to not throw when the argument `recordTableId` is an empty string
// - replace CoreObjectNamePlural.Person
const objectNamePlural =
useParams().objectNamePlural ?? CoreObjectNamePlural.Person;
const resetTableSelections = useResetTableRowSelection(objectNamePlural);
useEffect(() => {
cleanRecoilState();
}, [cleanRecoilState]);
@ -56,6 +70,17 @@ export const PageChangeEffect = () => {
}
}, [navigate, pageChangeEffectNavigateLocation]);
useEffect(() => {
const isLeavingRecordIndexPage = !!matchPath(
AppPath.RecordIndexPage,
previousLocation,
);
if (isLeavingRecordIndexPage) {
resetTableSelections();
}
}, [isMatchingLocation, previousLocation, resetTableSelections]);
useEffect(() => {
switch (true) {
case isMatchingLocation(AppPath.RecordIndexPage): {

View File

@ -86,7 +86,6 @@ export const RecordIndexPage = () => {
<RecordIndexContainerContextStoreObjectMetadataEffect />
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
<MainContextStoreComponentInstanceIdSetterEffect />
<RecordIndexContainer />
</StyledIndexContainer>
</PageBody>