Behaviour Fix on new record addition

packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx

@@ -10,12 +10,15 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
 import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
+import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode';
+import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useTableCell';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { PageAddButton } from '@/ui/layout/page/PageAddButton';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageHeader } from '@/ui/layout/page/PageHeader';
 import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { RecordTableContainer } from './RecordTableContainer';
 
@@ -57,11 +60,19 @@ export const RecordTablePage = () => {
     objectNameSingular,
   });
 
+  const recordTableId = objectNamePlural ?? '';
+
+  const { setSelectedTableCellEditMode } = useSelectedTableCellEditMode({
+    scopeId: recordTableId,
+  });
+  const setHotkeyScope = useSetHotkeyScope();
+
   const handleAddButtonClick = async () => {
     await createOneObject?.({});
-  };
 
-  const recordTableId = objectNamePlural ?? '';
+    setSelectedTableCellEditMode(0, 0);
+    setHotkeyScope(DEFAULT_CELL_SCOPE.scope, DEFAULT_CELL_SCOPE.customScopes);
+  };
 
   return (
     <PageContainer>

packages/twenty-front/src/modules/object-record/field/hooks/useIsFieldEditModeValueEmpty.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { isEntityFieldEditModeEmptyFamilySelector } from '@/object-record/field/states/selectors/isEntityFieldEditModeEmptyFamilySelector';
+
+import { FieldContext } from '../contexts/FieldContext';
+
+export const useIsFieldEditModeValueEmpty = () => {
+  const { entityId, fieldDefinition } = useContext(FieldContext);
+
+  const isFieldEditModeValueEmpty = useRecoilValue(
+    isEntityFieldEditModeEmptyFamilySelector({
+      fieldDefinition: {
+        type: fieldDefinition.type,
+      },
+      fieldName: fieldDefinition.metadata.fieldName,
+      entityId,
+    }),
+  );
+
+  return isFieldEditModeValueEmpty;
+};

packages/twenty-front/src/modules/object-record/field/hooks/useSaveFieldEditModeValue.ts

@@ -0,0 +1,112 @@
+import { useContext } from 'react';
+import { useRecoilCallback } from 'recoil';
+
+import { entityFieldsEditModeValueFamilySelector } from '@/object-record/field/states/selectors/entityFieldsEditModeValueFamilySelector';
+import { isFieldFullName } from '@/object-record/field/types/guards/isFieldFullName';
+import { isFieldFullNameValue } from '@/object-record/field/types/guards/isFieldFullNameValue';
+
+import { FieldContext } from '../contexts/FieldContext';
+import { isFieldBoolean } from '../types/guards/isFieldBoolean';
+import { isFieldBooleanValue } from '../types/guards/isFieldBooleanValue';
+import { isFieldCurrency } from '../types/guards/isFieldCurrency';
+import { isFieldCurrencyValue } from '../types/guards/isFieldCurrencyValue';
+import { isFieldDateTime } from '../types/guards/isFieldDateTime';
+import { isFieldDateTimeValue } from '../types/guards/isFieldDateTimeValue';
+import { isFieldEmail } from '../types/guards/isFieldEmail';
+import { isFieldEmailValue } from '../types/guards/isFieldEmailValue';
+import { isFieldLink } from '../types/guards/isFieldLink';
+import { isFieldLinkValue } from '../types/guards/isFieldLinkValue';
+import { isFieldNumber } from '../types/guards/isFieldNumber';
+import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
+import { isFieldPhone } from '../types/guards/isFieldPhone';
+import { isFieldPhoneValue } from '../types/guards/isFieldPhoneValue';
+import { isFieldRating } from '../types/guards/isFieldRating';
+import { isFieldRatingValue } from '../types/guards/isFieldRatingValue';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
+import { isFieldRelationValue } from '../types/guards/isFieldRelationValue';
+import { isFieldText } from '../types/guards/isFieldText';
+import { isFieldTextValue } from '../types/guards/isFieldTextValue';
+
+export const useSaveFieldEditModeValue = () => {
+  const { entityId, fieldDefinition } = useContext(FieldContext);
+
+  const saveFieldEditModeValue = useRecoilCallback(
+    ({ set }) =>
+      (currentValue: unknown) => {
+        const fieldIsRelation =
+          isFieldRelation(fieldDefinition) &&
+          isFieldRelationValue(currentValue);
+
+        const fieldIsText =
+          isFieldText(fieldDefinition) && isFieldTextValue(currentValue);
+
+        const fieldIsEmail =
+          isFieldEmail(fieldDefinition) && isFieldEmailValue(currentValue);
+
+        const fieldIsDateTime =
+          isFieldDateTime(fieldDefinition) &&
+          isFieldDateTimeValue(currentValue);
+
+        const fieldIsLink =
+          isFieldLink(fieldDefinition) && isFieldLinkValue(currentValue);
+
+        const fieldIsBoolean =
+          isFieldBoolean(fieldDefinition) && isFieldBooleanValue(currentValue);
+
+        const fieldIsProbability =
+          isFieldRating(fieldDefinition) && isFieldRatingValue(currentValue);
+
+        const fieldIsNumber =
+          isFieldNumber(fieldDefinition) && isFieldNumberValue(currentValue);
+
+        const fieldIsCurrency =
+          isFieldCurrency(fieldDefinition) &&
+          isFieldCurrencyValue(currentValue);
+
+        const fieldIsFullName =
+          isFieldFullName(fieldDefinition) &&
+          isFieldFullNameValue(currentValue);
+
+        const fieldIsPhone =
+          isFieldPhone(fieldDefinition) && isFieldPhoneValue(currentValue);
+
+        if (fieldIsRelation) {
+          const fieldName = fieldDefinition.metadata.fieldName;
+
+          set(
+            entityFieldsEditModeValueFamilySelector({ entityId, fieldName }),
+            currentValue,
+          );
+        } else if (
+          fieldIsText ||
+          fieldIsBoolean ||
+          fieldIsEmail ||
+          fieldIsProbability ||
+          fieldIsNumber ||
+          fieldIsDateTime ||
+          fieldIsPhone ||
+          fieldIsLink ||
+          fieldIsCurrency ||
+          fieldIsFullName
+        ) {
+          const fieldName = fieldDefinition.metadata.fieldName;
+
+          set(
+            entityFieldsEditModeValueFamilySelector({ entityId, fieldName }),
+            currentValue,
+          );
+        } else {
+          throw new Error(
+            `Invalid value to save: ${JSON.stringify(
+              currentValue,
+            )} for type : ${
+              fieldDefinition.type
+            }, type may not be implemented in useSaveFieldEditModeValue.`,
+          );
+        }
+      },
+    [entityId, fieldDefinition],
+  );
+
+  return saveFieldEditModeValue;
+};

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/CurrencyFieldInput.tsx

@@ -1,3 +1,4 @@
+import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
@@ -27,6 +28,8 @@ export const CurrencyFieldInput = ({
     persistCurrencyField,
   } = useCurrencyField();
 
+  const saveEditModeValue = useSaveFieldEditModeValue();
+
   const handleEnter = (newValue: string) => {
     onEnter?.(() => {
       persistCurrencyField({
@@ -75,6 +78,13 @@ export const CurrencyFieldInput = ({
     );
   };
 
+  const handleChange = (newValue: string) => {
+    saveEditModeValue({
+      amountText: newValue,
+      currencyCode: initialCurrencyCode,
+    });
+  };
+
   return (
     <FieldInputOverlay>
       <TextInput
@@ -87,6 +97,7 @@ export const CurrencyFieldInput = ({
         onShiftTab={handleShiftTab}
         onTab={handleTab}
         hotkeyScope={hotkeyScope}
+        onChange={handleChange}
       />
     </FieldInputOverlay>
   );

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/DateFieldInput.tsx

@@ -1,3 +1,4 @@
+import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
 import { DateInput } from '@/ui/field/input/components/DateInput';
 import { Nullable } from '~/types/Nullable';
 
@@ -20,6 +21,7 @@ export const DateFieldInput = ({
   const { fieldValue, hotkeyScope, clearable } = useDateTimeField();
 
   const persistField = usePersistField();
+  const saveEditModeValue = useSaveFieldEditModeValue();
 
   const persistDate = (newDate: Nullable<Date>) => {
     if (!newDate) {
@@ -46,6 +48,10 @@ export const DateFieldInput = ({
     onClickOutside?.(() => persistDate(newDate));
   };
 
+  const handleChange = (newDate: Nullable<Date>) => {
+    saveEditModeValue(newDate);
+  };
+
   const dateValue = fieldValue ? new Date(fieldValue) : null;
 
   return (
@@ -56,6 +62,7 @@ export const DateFieldInput = ({
       onEscape={handleEscape}
       value={dateValue}
       clearable={clearable}
+      onChange={handleChange}
     />
   );
 };

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/EmailFieldInput.tsx

@@ -1,3 +1,4 @@
+import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
@@ -24,6 +25,7 @@ export const EmailFieldInput = ({
   const { fieldDefinition, initialValue, hotkeyScope } = useEmailField();
 
   const persistField = usePersistField();
+  const saveEditModeValue = useSaveFieldEditModeValue();
 
   const handleEnter = (newText: string) => {
     onEnter?.(() => persistField(newText));
@@ -48,6 +50,10 @@ export const EmailFieldInput = ({
     onShiftTab?.(() => persistField(newText));
   };
 
+  const handleChange = (newText: string) => {
+    saveEditModeValue(newText);
+  };
+
   return (
     <FieldInputOverlay>
       <TextInput
@@ -60,6 +66,7 @@ export const EmailFieldInput = ({
         onShiftTab={handleShiftTab}
         onTab={handleTab}
         hotkeyScope={hotkeyScope}
+        onChange={handleChange}
       />
     </FieldInputOverlay>
   );

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/FullNameFieldInput.tsx

@@ -1,3 +1,4 @@
+import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
 import { useFullNameField } from '@/object-record/field/meta-types/hooks/useFullNameField';
 import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
 import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
@@ -7,6 +8,12 @@ import { usePersistField } from '../../../hooks/usePersistField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
+const FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS =
+  'F‌‌irst name';
+
+const LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS =
+  'L‌‌ast name';
+
 export type FullNameFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
@@ -25,6 +32,8 @@ export const FullNameFieldInput = ({
   const { hotkeyScope, initialValue } = useFullNameField();
 
   const persistField = usePersistField();
+  const saveEditModeValue = useSaveFieldEditModeValue();
+
   const convertToFullName = (newDoubleText: FieldDoubleText) => {
     return {
       firstName: newDoubleText.firstValue,
@@ -55,19 +64,28 @@ export const FullNameFieldInput = ({
     onShiftTab?.(() => persistField(convertToFullName(newDoubleText)));
   };
 
+  const handleChange = (newDoubleText: FieldDoubleText) => {
+    saveEditModeValue(convertToFullName(newDoubleText));
+  };
+
   return (
     <FieldInputOverlay>
       <DoubleTextInput
         firstValue={initialValue.firstName}
         secondValue={initialValue.lastName}
-        firstValuePlaceholder={'F‌‌irst name'}
-        secondValuePlaceholder={'L‌‌ast name'}
+        firstValuePlaceholder={
+          FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+        }
+        secondValuePlaceholder={
+          LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+        }
         onClickOutside={handleClickOutside}
         onEnter={handleEnter}
         onEscape={handleEscape}
         onShiftTab={handleShiftTab}
         onTab={handleTab}
         hotkeyScope={hotkeyScope}
+        onChange={handleChange}
       />
     </FieldInputOverlay>
   );

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/LinkFieldInput.tsx

@@ -1,3 +1,4 @@
+import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
@@ -22,6 +23,8 @@ export const LinkFieldInput = ({
 }: LinkFieldInputProps) => {
   const { initialValue, hotkeyScope, persistLinkField } = useLinkField();
 
+  const saveEditModeValue = useSaveFieldEditModeValue();
+
   const handleEnter = (newURL: string) => {
     onEnter?.(() =>
       persistLinkField({
@@ -70,6 +73,13 @@ export const LinkFieldInput = ({
     );
   };
 
+  const handleChange = (newURL: string) => {
+    saveEditModeValue({
+      url: newURL,
+      label: newURL,
+    });
+  };
+
   return (
     <FieldInputOverlay>
       <TextInput
@@ -82,6 +92,7 @@ export const LinkFieldInput = ({
         onEscape={handleEscape}
         onTab={handleTab}
         onShiftTab={handleShiftTab}
+        onChange={handleChange}
       />
     </FieldInputOverlay>
   );