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 d51a791803..56f0205d3c 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 0634fc44fd..53e9c58fe0 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 e60e79f173..6b5720b7a0 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 123ea1ddb0..8f0086cc14 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 fd5931c72f..00a6ef1a5c 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 d1b138a53b..edc7d64f9c 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'