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

Creating records in side panel not working (#10999)

Browse Source 
Fixes https://github.com/twentyhq/core-team-issues/issues/624

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Guillim
2025-03-18 19:34:50 +01:00
committed by GitHub
parent 9e83d902d8
commit 841d48b704
6 changed files with 29 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts
View File

@ -1,12 +1,7 @@
import { Key } from 'ts-key-enum';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
export const useRegisterInputEvents = <T>({
@ -30,32 +25,9 @@ export const useRegisterInputEvents = <T>({
onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
hotkeyScope: string;
}) => {
const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
const { recordId, fieldDefinition } = useContext(FieldContext);
useListenClickOutside({
refs: [inputRef, copyRef].filter(isDefined),
callback: (event) => {
const fieldDropdownFocusIdTableCell = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'table-cell',
);
const fieldDropdownFocusIdInlineCell = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'inline-cell',
);
if (
activeDropdownFocusId !== fieldDropdownFocusIdTableCell &&
activeDropdownFocusId !== fieldDropdownFocusIdInlineCell
) {
return;
}
onClickOutside?.(event, inputValue);
},
enabled: isDefined(onClickOutside),

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

@ -21,10 +21,7 @@ import { isFieldSelect } from '@/object-record/record-field/types/guards/isField
import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { useRecoilCallback } from 'recoil';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { RecordInlineCellContainer } from './RecordInlineCellContainer';
import {
@ -83,30 +80,15 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
closeInlineCell();
};
const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
({ snapshot }) =>
(persistField, event) => {
const recordFieldDropdownId = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'inline-cell',
);
const handleClickOutside: FieldInputClickOutsideEvent = (
persistField,
event,
) => {
event.stopImmediatePropagation();
const activeDropdownFocusId = snapshot
.getLoadable(activeDropdownFocusIdState)
.getValue();
if (recordFieldDropdownId !== activeDropdownFocusId) {
return;
}
event.stopImmediatePropagation();
persistField();
closeInlineCell();
},
[closeInlineCell, fieldDefinition.fieldMetadataId, recordId],
);
persistField();
closeInlineCell();
};
const { getIcon } = useIcons();
const { openFieldInput, closeFieldInput } = useOpenFieldInputEditMode();

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

@ -5,10 +5,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { useRecoilCallback } from 'recoil';
export const RecordTableCellFieldInput = () => {
const { recordId, fieldDefinition } = useContext(FieldContext);
@ -43,35 +40,20 @@ export const RecordTableCellFieldInput = () => {
onCloseTableCell();
};
const handleClickOutside = useRecoilCallback(
({ snapshot }) =>
(persistField: () => void, event: MouseEvent | TouchEvent) => {
const dropdownFocusId = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'table-cell',
);
const handleClickOutside = (
persistField: () => void,
event: MouseEvent | TouchEvent,
) => {
event.stopImmediatePropagation();
const activeDropdownFocusId = snapshot
.getLoadable(activeDropdownFocusIdState)
.getValue();
onUpsertRecord({
persistField,
recordId,
fieldName: fieldDefinition.metadata.fieldName,
});
if (activeDropdownFocusId !== dropdownFocusId) {
return;
}
event.stopImmediatePropagation();
onUpsertRecord({
persistField,
recordId,
fieldName: fieldDefinition.metadata.fieldName,
});
onCloseTableCell();
},
[fieldDefinition, onCloseTableCell, onUpsertRecord, recordId],
);
onCloseTableCell();
};
const handleEscape: FieldInputEvent = (persistField) => {
onUpsertRecord({

34
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx
View File

@ -15,10 +15,7 @@ import {
} from '@/object-record/record-title-cell/components/RecordTitleCellContext';
import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay';
import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { useRecoilCallback } from 'recoil';
type RecordTitleCellProps = {
loading?: boolean;
@ -54,30 +51,15 @@ export const RecordTitleCell = ({
closeInlineCell();
};
const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
({ snapshot }) =>
(persistField, event) => {
const recordFieldDropdownId = getDropdownFocusIdForRecordField(
recordId,
fieldDefinition.fieldMetadataId,
'inline-cell',
);
const handleClickOutside: FieldInputClickOutsideEvent = (
persistField,
event,
) => {
event.stopImmediatePropagation();
const activeDropdownFocusId = snapshot
.getLoadable(activeDropdownFocusIdState)
.getValue();
if (recordFieldDropdownId !== activeDropdownFocusId) {
return;
}
event.stopImmediatePropagation();
persistField();
closeInlineCell();
},
[closeInlineCell, fieldDefinition.fieldMetadataId, recordId],
);
persistField();
closeInlineCell();
};
const recordTitleCellContextValue: RecordTitleCellContextProps = {
editModeContent: (

1
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx
View File

@ -65,6 +65,7 @@ export const RecordTitleCellTextFieldInput = ({
return (
<TextInputV2
ref={wrapperRef}
autoGrow
sizeVariant={sizeVariant}
inheritFontStyles

28
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts
View File

@ -1,8 +1,6 @@
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
@ -190,32 +188,6 @@ export const useListenClickOutside = <T extends Element>({
!isMouseDownInside &&
!isClickedOnExcluded;
if (CLICK_OUTSIDE_DEBUG_MODE) {
const activeDropdownFocusId = snapshot
.getLoadable(activeDropdownFocusIdState)
.getValue();
const previousDropdownFocusId = snapshot
.getLoadable(previousDropdownFocusIdState)
.getValue();
// eslint-disable-next-line no-console
console.log('click outside compare refs', {
listenerId,
shouldTrigger,
isListening,
hasMouseDownHappened,
clickedOnAtLeastOneRef,
isMouseDownInside,
isClickedOnExcluded,
activeDropdownFocusId,
previousDropdownFocusId,
hotkeyScope,
enabled,
event,
});
}
if (shouldTrigger) {
callback(event);
}