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:
@ -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): {
|
||||
|
||||
@ -86,7 +86,6 @@ export const RecordIndexPage = () => {
|
||||
<RecordIndexContainerContextStoreObjectMetadataEffect />
|
||||
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
|
||||
<MainContextStoreComponentInstanceIdSetterEffect />
|
||||
|
||||
<RecordIndexContainer />
|
||||
</StyledIndexContainer>
|
||||
</PageBody>
|
||||
|
||||
Reference in New Issue
Block a user