From d85c45a4cf89383a57b7b0b34a301cc6ee27c6a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Tue, 27 May 2025 12:02:24 +0200 Subject: [PATCH] Fix last row disappearing when dragging a row in the table (#12297) # Fix last row disappearing when dragging a row in the table Fixes https://github.com/twentyhq/core-team-issues/issues/836 The issue came from the fact that the provided placeholder was not mounted at the right place (after the footer when it should be mounted before it). I created a context to which we can pass the placeholder. We can use this placeholder anywhere inside the table by using `RecordTableBodyDroppablePlaceholder`. ## Before https://github.com/user-attachments/assets/39a2e45b-6d97-4450-bfee-12135a873a1d ## After https://github.com/user-attachments/assets/ca126819-67f2-4358-b644-85172fef3b8f --- .../components/RecordTableNoRecordGroupRows.tsx | 2 ++ .../components/RecordTableRecordGroupRows.tsx | 2 ++ .../components/RecordTableBodyDroppable.tsx | 8 ++++++-- .../RecordTableBodyDroppablePlaceholder.tsx | 7 +++++++ .../contexts/RecordTableBodyDroppableContext.ts | 13 +++++++++++++ 5 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx index 28a4f4ae2..1feefdd81 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx @@ -1,4 +1,5 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; +import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder'; import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader'; import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; @@ -27,6 +28,7 @@ export const RecordTableNoRecordGroupRows = () => { ); })} + {!isRecordTableInitialLoading && allRecordIds.length > 0 && ( )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx index 6dd0d879b..a92111010 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx @@ -1,6 +1,7 @@ import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; +import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder'; import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; import { RecordTableRecordGroupSectionAddNew } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew'; @@ -57,6 +58,7 @@ export const RecordTableRecordGroupRows = () => { })} + setRecordTableHoverPosition(null)} > - {children} - {provided.placeholder} + + {children} + )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx new file mode 100644 index 000000000..9764a17a1 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx @@ -0,0 +1,7 @@ +import { useRecordTableBodyDroppableContextOrThrow } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext'; + +export const RecordTableBodyDroppablePlaceholder = () => { + const { droppablePlaceholder } = useRecordTableBodyDroppableContextOrThrow(); + + return droppablePlaceholder; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts new file mode 100644 index 000000000..cf22a97cd --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts @@ -0,0 +1,13 @@ +import { ReactNode } from 'react'; +import { createRequiredContext } from '~/utils/createRequiredContext'; + +export type RecordTableBodyDroppableContextValue = { + droppablePlaceholder: ReactNode; +}; + +export const [ + RecordTableBodyDroppableContextProvider, + useRecordTableBodyDroppableContextOrThrow, +] = createRequiredContext( + 'RecordTableBodyDroppableContext', +);