From f5835a77e5918ec72378e9c94d92a0fd9a28d208 Mon Sep 17 00:00:00 2001 From: Naifer <161821705+omarNaifer12@users.noreply.github.com> Date: Tue, 8 Jul 2025 10:15:08 +0100 Subject: [PATCH] fix: prevent LinkAvatarChip from triggering page reload when table cells or inline cells are in edit mode (#12734) resolve #11075 The issue was that when inline cells or table cells are in edit mode, a click outside event listener is active, and its callback calls event.stopImmediatePropagation(). This prevents the onClick of LinkChip from firing, allowing the browser's default behavior to trigger the 'to' link and cause a full page reload. To fix this, I added event.preventDefault() inside each click outside callback to stop the browser from reloading. Another possible solution: check if currentTableCellInEditModePosition or isInlineCellInEditMode is true, and if so: Either convert the StyledLink in LinkChip into a div Or set forceDisableClick = true, which falls back to AvatarChip. Before: https://github.com/user-attachments/assets/7ffd76fd-988e-484b-bad6-10e0147502c2 After: https://github.com/user-attachments/assets/18cfbc0e-8af6-4ecc-862e-a2b8f02e2535 --------- Co-authored-by: Lucas Bordeau --- .../record-inline-cell/components/RecordInlineCell.tsx | 2 +- .../single-record-picker/components/SingleRecordPicker.tsx | 1 + .../record-table-cell/components/RecordTableCellFieldInput.tsx | 2 +- .../src/modules/ui/field/input/components/DateInput.tsx | 2 -- .../src/modules/ui/field/input/components/MultiSelectInput.tsx | 2 +- .../src/modules/ui/input/components/SelectInput.tsx | 2 +- 6 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx index d51a79180..56f0205d3 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx @@ -136,7 +136,7 @@ export const RecordInlineCell = ({ if (hotkeyScope.scope !== DEFAULT_CELL_SCOPE.scope) { return; } - + event.preventDefault(); event.stopImmediatePropagation(); persistField(); diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx index 0634fc44f..53e9c58fe 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx @@ -55,6 +55,7 @@ export const SingleRecordPicker = ({ useListenClickOutside({ refs: [containerRef], callback: (event) => { + event.preventDefault(); event.stopImmediatePropagation(); const weAreNotInAnHTMLInput = !( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx index e60e79f17..6b5720b7a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx @@ -41,8 +41,8 @@ export const RecordTableCellFieldInput = () => { if (hotkeyScope.scope !== TableHotkeyScope.CellEditMode) { return; } + event.preventDefault(); event.stopImmediatePropagation(); - persistField(); onCloseTableCell(); }, diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx index 123ea1ddb..8f0086cc1 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx @@ -90,14 +90,12 @@ export const DateInput = ({ if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) { closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID); closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID); - onEscape(internalValue); onClickOutside(event, internalValue); } }, [ closeDropdownYearSelect, closeDropdownMonthSelect, - onEscape, onClickOutside, internalValue, ], diff --git a/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx index fd5931c72..00a6ef1a5 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx @@ -89,7 +89,7 @@ export const MultiSelectInput = ({ refs: [containerRef], callback: (event) => { event.stopImmediatePropagation(); - + event.preventDefault(); const weAreNotInAnHTMLInput = !( event.target instanceof HTMLInputElement && event.target.tagName === 'INPUT' diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx index d1b138a53..edc7d64f9 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx @@ -86,7 +86,7 @@ export const SelectInput = ({ refs: [containerRef], callback: (event) => { event.stopImmediatePropagation(); - + event.preventDefault(); const weAreNotInAnHTMLInput = !( event.target instanceof HTMLInputElement && event.target.tagName === 'INPUT'