admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: prevent LinkAvatarChip from triggering page reload when table cells or inline cells are in edit mode (#12734)

Browse Source 
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 <bordeau.lucas@gmail.com>
This commit is contained in:
Naifer
2025-07-08 10:15:08 +01:00
committed by GitHub
parent e722303a2f
commit f5835a77e5
6 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
View File

@ -136,7 +136,7 @@ export const RecordInlineCell = ({
if (hotkeyScope.scope !== DEFAULT_CELL_SCOPE.scope) { if (hotkeyScope.scope !== DEFAULT_CELL_SCOPE.scope) {
return; return;
} }
event.preventDefault();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
persistField(); persistField();

1
packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
View File

@ -55,6 +55,7 @@ export const SingleRecordPicker = ({
useListenClickOutside({ useListenClickOutside({
refs: [containerRef], refs: [containerRef],
callback: (event) => { callback: (event) => {
event.preventDefault();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
const weAreNotInAnHTMLInput = !( const weAreNotInAnHTMLInput = !(

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx
View File

@ -41,8 +41,8 @@ export const RecordTableCellFieldInput = () => {
if (hotkeyScope.scope !== TableHotkeyScope.CellEditMode) { if (hotkeyScope.scope !== TableHotkeyScope.CellEditMode) {
return; return;
} }
event.preventDefault();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
persistField(); persistField();
onCloseTableCell(); onCloseTableCell();
}, },

2
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
View File

@ -90,14 +90,12 @@ export const DateInput = ({
if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) { if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID); closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID); closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
onEscape(internalValue);
onClickOutside(event, internalValue); onClickOutside(event, internalValue);
} }
}, },
[ [
closeDropdownYearSelect, closeDropdownYearSelect,
closeDropdownMonthSelect, closeDropdownMonthSelect,
onEscape,
onClickOutside, onClickOutside,
internalValue, internalValue,
], ],

2
packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
View File

@ -89,7 +89,7 @@ export const MultiSelectInput = ({
refs: [containerRef], refs: [containerRef],
callback: (event) => { callback: (event) => {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
event.preventDefault();
const weAreNotInAnHTMLInput = !( const weAreNotInAnHTMLInput = !(
event.target instanceof HTMLInputElement && event.target instanceof HTMLInputElement &&
event.target.tagName === 'INPUT' event.target.tagName === 'INPUT'

2
packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
View File

@ -86,7 +86,7 @@ export const SelectInput = ({
refs: [containerRef], refs: [containerRef],
callback: (event) => { callback: (event) => {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
event.preventDefault();
const weAreNotInAnHTMLInput = !( const weAreNotInAnHTMLInput = !(
event.target instanceof HTMLInputElement && event.target instanceof HTMLInputElement &&
event.target.tagName === 'INPUT' event.target.tagName === 'INPUT'