Persist table cell values on cell close (#655)

* Persist table cell values on cell close

* Apply to all cells

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { CellCommentChip } from '@/comments/components/table/CellCommentChip';
 import { useOpenTimelineRightDrawer } from '@/comments/hooks/useOpenTimelineRightDrawer';
 import { EditableCellChip } from '@/ui/components/editable-cell/types/EditableChip';
@@ -21,6 +23,8 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
   const [updateCompany] = useUpdateCompanyMutation();
 
+  const [internalValue, setInternalValue] = useState(company.name ?? '');
+
   function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
@@ -33,20 +37,17 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     ]);
   }
 
+  useEffect(() => {
+    setInternalValue(company.name ?? '');
+  }, [company.name]);
+
   return (
     <EditableCellChip
-      value={company.name ?? ''}
+      value={internalValue}
       placeholder="Name"
       picture={getLogoUrlFromDomainName(company.domainName)}
       id={company.id}
-      changeHandler={(value: string) => {
+      changeHandler={setInternalValue}
-        updateCompany({
-          variables: {
-            id: company.id,
-            name: value,
-          },
-        });
-      }}
       ChipComponent={CompanyChip}
       rightEndContents={[
         <CellCommentChip
@@ -54,6 +55,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
           onClick={handleCommentClick}
         />,
       ]}
+      onSubmit={() =>
+        updateCompany({
+          variables: {
+            id: company.id,
+            name: internalValue,
+          },
+        })
+      }
+      onCancel={() => setInternalValue(company.name ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
@@ -14,19 +15,24 @@ export function EditableCompanyAddressCell() {
     companyAddressFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(address ?? '');
+  useEffect(() => {
+    setInternalValue(address ?? '');
+  }, [address]);
+
   return (
     <EditableCellText
-      value={address ?? ''}
+      value={internalValue}
-      onChange={async (newAddress: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updateCompany({
-        await updateCompany({
           variables: {
             id: currentRowEntityId,
-            address: newAddress,
+            address: internalValue,
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(address ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
@@ -13,20 +14,24 @@ export function EditableCompanyDomainNameCell() {
   const name = useRecoilValue(
     companyDomainNameFamilyState(currentRowEntityId ?? ''),
   );
+  const [internalValue, setInternalValue] = useState(name ?? '');
+  useEffect(() => {
+    setInternalValue(name ?? '');
+  }, [name]);
 
   return (
     <EditableCellText
-      value={name ?? ''}
+      value={internalValue}
-      onChange={async (domainName: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updateCompany({
-        await updateCompany({
           variables: {
             id: currentRowEntityId,
-            domainName: domainName,
+            domainName: internalValue,
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(name ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
@@ -14,20 +15,26 @@ export function EditableCompanyEmployeesCell() {
     companyEmployeesFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(employees ?? '');
+
+  useEffect(() => {
+    setInternalValue(employees ?? '');
+  }, [employees]);
+
   return (
     // TODO: Create an EditableCellNumber component
     <EditableCellText
-      value={employees ?? ''}
+      value={internalValue}
-      onChange={async (newEmployees: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updateCompany({
-        await updateCompany({
           variables: {
             id: currentRowEntityId,
-            employees: parseInt(newEmployees),
+            employees: parseInt(internalValue),
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(employees ?? '')}
     />
   );
 }

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -15,6 +15,8 @@ type OwnProps = {
     | null
     | undefined;
   onChange: (firstName: string, lastName: string) => void;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 const NoEditModeContainer = styled.div`
@@ -28,7 +30,12 @@ const RightContainer = styled.div`
   margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
-export function EditablePeopleFullName({ person, onChange }: OwnProps) {
+export function EditablePeopleFullName({
+  person,
+  onChange,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
 
   function handleDoubleTextChange(
@@ -61,6 +68,8 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
       nonEditModeContent={
         <NoEditModeContainer>
           <PersonChip

front/src/modules/people/components/PeopleCompanyCreateCell.tsx

@@ -72,7 +72,7 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
       secondValuePlaceholder="Name"
       onChange={handleDoubleTextChange}
       onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
-      onExit={() => setIsCreating(false)}
+      onCancel={() => setIsCreating(false)}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
@@ -12,19 +13,25 @@ export function EditablePeopleCityCell() {
 
   const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
 
+  const [internalValue, setInternalValue] = useState(city ?? '');
+
+  useEffect(() => {
+    setInternalValue(city ?? '');
+  }, [city]);
+
   return (
     <EditableCellPhone
-      value={city ?? ''}
+      value={internalValue}
-      onChange={async (newCity: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updatePerson({
-        await updatePerson({
           variables: {
             id: currentRowEntityId,
-            city: newCity,
+            city: internalValue,
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(city ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleEmailCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
@@ -14,19 +15,25 @@ export function EditablePeopleEmailCell() {
     peopleEmailFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(email ?? '');
+
+  useEffect(() => {
+    setInternalValue(email ?? '');
+  }, [email]);
+
   return (
     <EditableCellText
-      value={email ?? ''}
+      value={internalValue}
-      onChange={async (newEmail: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updatePerson({
-        await updatePerson({
           variables: {
             id: currentRowEntityId,
-            email: newEmail,
+            email: internalValue,
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(email ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
@@ -14,24 +15,38 @@ export function EditablePeopleFullNameCell() {
     peopleNameCellFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalFirstName, setInternalFirstName] = useState(firstName ?? '');
+  const [internalLastName, setInternalLastName] = useState(lastName ?? '');
+
+  useEffect(() => {
+    setInternalFirstName(firstName ?? '');
+    setInternalLastName(lastName ?? '');
+  }, [firstName, lastName]);
+
   return (
     <EditablePeopleFullName
       person={{
         id: currentRowEntityId ?? undefined,
         _commentThreadCount: commentCount ?? undefined,
-        firstName: firstName ?? undefined,
+        firstName: internalFirstName,
-        lastName: lastName ?? undefined,
+        lastName: internalLastName,
       }}
-      onChange={async (firstName: string, lastName: string) => {
+      onChange={(firstName, lastName) => {
-        if (!currentRowEntityId) return;
+        setInternalFirstName(firstName);
-
+        setInternalLastName(lastName);
-        await updatePerson({
+      }}
+      onSubmit={() =>
+        updatePerson({
           variables: {
             id: currentRowEntityId,
-            firstName,
+            firstName: internalFirstName,
-            lastName,
+            lastName: internalLastName,
           },
-        });
+        })
+      }
+      onCancel={() => {
+        setInternalFirstName(firstName ?? '');
+        setInternalLastName(lastName ?? '');
       }}
     />
   );

front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
@@ -13,19 +14,26 @@ export function EditablePeoplePhoneCell() {
   const phone = useRecoilValue(
     peoplePhoneFamilyState(currentRowEntityId ?? ''),
   );
+
+  const [internalValue, setInternalValue] = useState(phone ?? '');
+
+  useEffect(() => {
+    setInternalValue(phone ?? '');
+  }, [phone]);
+
   return (
     <EditableCellPhone
-      value={phone ?? ''}
+      value={internalValue}
-      onChange={async (newPhone: string) => {
+      onChange={setInternalValue}
-        if (!currentRowEntityId) return;
+      onSubmit={() =>
-
+        updatePerson({
-        await updatePerson({
           variables: {
             id: currentRowEntityId,
-            phone: newPhone,
+            phone: internalValue,
           },
-        });
+        })
-      }}
+      }
+      onCancel={() => setInternalValue(phone ?? '')}
     />
   );
 }

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -26,6 +26,8 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   editHotkeysScope?: HotkeysScope;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 export function EditableCell({
@@ -34,6 +36,8 @@ export function EditableCell({
   editModeContent,
   nonEditModeContent,
   editHotkeysScope,
+  onSubmit,
+  onCancel,
 }: OwnProps) {
   const { isCurrentCellInEditMode } = useCurrentCellEditMode();
 
@@ -45,6 +49,8 @@ export function EditableCell({
         <EditableCellEditMode
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
         >
           {editModeContent}
         </EditableCellEditMode>

front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx

@@ -1,13 +1,9 @@
 import { ReactElement, useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
-import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
-import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
-import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus';
 import { overlayBackground } from '@/ui/themes/effects';
 
-import { useEditableCell } from './hooks/useEditableCell';
+import { useRegisterCloseCellHandlers } from './hooks/useRegisterCloseCellHandlers';
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
   align-items: center;
@@ -33,60 +29,20 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   onOutsideClick?: () => void;
+  onCancel?: () => void;
+  onSubmit?: () => void;
 };
 
 export function EditableCellEditMode({
   editModeHorizontalAlign,
   editModeVerticalPosition,
   children,
+  onCancel,
+  onSubmit,
 }: OwnProps) {
   const wrapperRef = useRef(null);
 
-  const { closeEditableCell } = useEditableCell();
+  useRegisterCloseCellHandlers(wrapperRef, onSubmit, onCancel);
-  const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
-
-  useListenClickOutsideArrayOfRef([wrapperRef], () => {
-    closeEditableCell();
-  });
-
-  useScopedHotkeys(
-    'enter',
-    () => {
-      closeEditableCell();
-      moveDown();
-    },
-    InternalHotkeysScope.CellEditMode,
-    [closeEditableCell],
-  );
-
-  useScopedHotkeys(
-    'esc',
-    () => {
-      closeEditableCell();
-    },
-    InternalHotkeysScope.CellEditMode,
-    [closeEditableCell],
-  );
-
-  useScopedHotkeys(
-    'tab',
-    () => {
-      closeEditableCell();
-      moveRight();
-    },
-    InternalHotkeysScope.CellEditMode,
-    [closeEditableCell, moveRight],
-  );
-
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
-      closeEditableCell();
-      moveLeft();
-    },
-    InternalHotkeysScope.CellEditMode,
-    [closeEditableCell, moveRight],
-  );
 
   return (
     <EditableCellEditModeContainer

front/src/modules/ui/components/editable-cell/hooks/useEditableCell.ts

@@ -4,7 +4,6 @@ import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope';
 import { HotkeysScope } from '@/hotkeys/types/internal/HotkeysScope';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { useCloseCurrentCellInEditMode } from '@/ui/tables/hooks/useClearCellInEditMode';
-import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveState';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 
 import { useCurrentCellEditMode } from './useCurrentCellEditMode';
@@ -30,7 +29,6 @@ export function useEditableCell() {
 
         if (!isSomeInputInEditMode) {
           set(isSomeInputInEditModeState, true);
-          set(isSoftFocusActiveState, false);
 
           setCurrentCellInEditMode();
 

front/src/modules/ui/components/editable-cell/hooks/useRegisterCloseCellHandlers.ts

@@ -0,0 +1,66 @@
+import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus';
+
+import { useCurrentCellEditMode } from './useCurrentCellEditMode';
+import { useEditableCell } from './useEditableCell';
+
+export function useRegisterCloseCellHandlers(
+  wrapperRef: React.RefObject<HTMLDivElement>,
+  onSubmit?: () => void,
+  onCancel?: () => void,
+) {
+  const { closeEditableCell } = useEditableCell();
+  const { isCurrentCellInEditMode } = useCurrentCellEditMode();
+  useListenClickOutsideArrayOfRef([wrapperRef], () => {
+    if (isCurrentCellInEditMode) {
+      onSubmit?.();
+      closeEditableCell();
+    }
+  });
+  const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
+
+  useScopedHotkeys(
+    'enter',
+    () => {
+      onSubmit?.();
+      closeEditableCell();
+      moveDown();
+    },
+    InternalHotkeysScope.CellEditMode,
+    [closeEditableCell, onSubmit, moveDown],
+  );
+
+  useScopedHotkeys(
+    'esc',
+    () => {
+      closeEditableCell();
+      onCancel?.();
+    },
+    InternalHotkeysScope.CellEditMode,
+    [closeEditableCell, onCancel],
+  );
+
+  useScopedHotkeys(
+    'tab',
+    () => {
+      onSubmit?.();
+      closeEditableCell();
+      moveRight();
+    },
+    InternalHotkeysScope.CellEditMode,
+    [closeEditableCell, onSubmit, moveRight],
+  );
+
+  useScopedHotkeys(
+    'shift+tab',
+    () => {
+      onSubmit?.();
+      closeEditableCell();
+      moveLeft();
+    },
+    InternalHotkeysScope.CellEditMode,
+    [closeEditableCell, onSubmit, moveRight],
+  );
+}

front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx

@@ -14,6 +14,8 @@ type OwnProps = {
   secondValuePlaceholder: string;
   nonEditModeContent: ReactElement;
   onChange: (firstValue: string, secondValue: string) => void;
+  onSubmit?: () => void;
+  onCancel?: () => void;
   loading?: boolean;
 };
 
@@ -23,6 +25,8 @@ export function EditableCellDoubleText({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
+  onSubmit,
+  onCancel,
   nonEditModeContent,
   loading,
 }: OwnProps) {
@@ -50,6 +54,8 @@ export function EditableCellDoubleText({
           firstValuePlaceholder={firstValuePlaceholder}
           secondValuePlaceholder={secondValuePlaceholder}
           onChange={handleOnChange}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
         />
       }
       nonEditModeContent={loading ? <CellSkeleton /> : nonEditModeContent}

front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx

@@ -15,8 +15,8 @@ type OwnProps = {
   firstValuePlaceholder: string;
   secondValuePlaceholder: string;
   onChange: (firstValue: string, secondValue: string) => void;
-  onSubmit?: (firstValue: string, secondValue: string) => void;
+  onSubmit?: () => void;
-  onExit?: () => void;
+  onCancel?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -37,7 +37,7 @@ export function EditableCellDoubleTextEditMode({
   secondValuePlaceholder,
   onChange,
   onSubmit,
-  onExit,
+  onCancel,
 }: OwnProps) {
   const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left');
 
@@ -57,9 +57,7 @@ export function EditableCellDoubleTextEditMode({
     () => {
       closeCell();
       moveDown();
-      if (onSubmit) {
+      onSubmit?.();
-        onSubmit(firstValue, secondValue);
-      }
     },
     InternalHotkeysScope.CellDoubleTextInput,
     [closeCell],
@@ -68,9 +66,7 @@ export function EditableCellDoubleTextEditMode({
   useScopedHotkeys(
     Key.Escape,
     () => {
-      if (onExit) {
+      onCancel?.();
-        onExit();
-      }
       closeCell();
     },
     InternalHotkeysScope.CellDoubleTextInput,
@@ -84,9 +80,7 @@ export function EditableCellDoubleTextEditMode({
         setFocusPosition('right');
         secondValueInputRef.current?.focus();
       } else {
-        if (onExit) {
+        onSubmit?.();
-          onExit();
-        }
         closeCell();
         moveRight();
       }
@@ -102,6 +96,7 @@ export function EditableCellDoubleTextEditMode({
         setFocusPosition('left');
         firstValueInputRef.current?.focus();
       } else {
+        onSubmit?.();
         closeCell();
         moveLeft();
       }

front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx

@@ -9,9 +9,17 @@ type OwnProps = {
   placeholder?: string;
   value: string;
   onChange: (updated: string) => void;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
-export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) {
+export function EditableCellPhone({
+  value,
+  placeholder,
+  onChange,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
@@ -34,6 +42,8 @@ export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) {
         />
       }
       nonEditModeContent={<InplaceInputPhoneDisplayMode value={inputValue} />}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
     />
   );
 }

front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx

@@ -12,6 +12,8 @@ type OwnProps = {
   onChange: (newValue: string) => void;
   editModeHorizontalAlign?: 'left' | 'right';
   loading?: boolean;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 export function EditableCellText({
@@ -20,6 +22,8 @@ export function EditableCellText({
   onChange,
   editModeHorizontalAlign,
   loading,
+  onCancel,
+  onSubmit,
 }: OwnProps) {
   const [internalValue, setInternalValue] = useState(value);
 
@@ -41,6 +45,8 @@ export function EditableCellText({
           }}
         />
       }
+      onSubmit={onSubmit}
+      onCancel={onCancel}
       nonEditModeContent={
         loading ? (
           <CellSkeleton />

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -28,6 +28,8 @@ export type EditableChipProps = {
   commentThreadCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 // TODO: refactor
@@ -58,6 +60,8 @@ export function EditableCellChip({
   editModeHorizontalAlign,
   ChipComponent,
   rightEndContents,
+  onSubmit,
+  onCancel,
 }: EditableChipProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
@@ -87,6 +91,8 @@ export function EditableCellChip({
           }}
         />
       }
+      onSubmit={onSubmit}
+      onCancel={onCancel}
       nonEditModeContent={
         <NoEditModeContainer>
           <ChipComponent id={id} name={inputValue} picture={picture} />

front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts

@@ -31,6 +31,10 @@ export function useLeaveTableFocus() {
           .getLoadable(currentHotkeysScopeState)
           .valueOrThrow();
 
+        if (isSomeInputInEditMode) {
+          return;
+        }
+
         if (!isSoftFocusActive && !isSomeInputInEditMode) {
           return;
         }