Persist table cell values on cell close (#655)

* Persist table cell values on cell close * Apply to all cells
2023-07-13 21:20:08 -07:00
parent ca1723f2e6
commit 551c3b5e60
20 changed files with 260 additions and 133 deletions
--- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx
+++ b/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) => {
-        updateCompany({
-          variables: {
-            id: company.id,
-            name: value,
-          },
-        });
-      }}
+      changeHandler={setInternalValue}
      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 ?? '')}
    />
  );
 }
--- a/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx
+++ b/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 ?? ''}
-      onChange={async (newAddress: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
          variables: {
            id: currentRowEntityId,
-            address: newAddress,
+            address: internalValue,
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(address ?? '')}
    />
  );
 }
--- a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx
+++ b/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 ?? ''}
-      onChange={async (domainName: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
          variables: {
            id: currentRowEntityId,
-            domainName: domainName,
+            domainName: internalValue,
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(name ?? '')}
    />
  );
 }
--- a/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx
+++ b/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 ?? ''}
-      onChange={async (newEmployees: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
          variables: {
            id: currentRowEntityId,
-            employees: parseInt(newEmployees),
+            employees: parseInt(internalValue),
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(employees ?? '')}
    />
  );
 }
--- a/front/src/modules/people/components/EditablePeopleFullName.tsx
+++ b/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
--- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx
+++ b/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)}
    />
  );
 }
--- a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx
+++ b/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 ?? ''}
-      onChange={async (newCity: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
          variables: {
            id: currentRowEntityId,
-            city: newCity,
+            city: internalValue,
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(city ?? '')}
    />
  );
 }
--- a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx
+++ b/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 ?? ''}
-      onChange={async (newEmail: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
          variables: {
            id: currentRowEntityId,
-            email: newEmail,
+            email: internalValue,
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(email ?? '')}
    />
  );
 }
--- a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx
+++ b/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,
-        lastName: lastName ?? undefined,
+        firstName: internalFirstName,
+        lastName: internalLastName,
      }}
-      onChange={async (firstName: string, lastName: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      onChange={(firstName, lastName) => {
+        setInternalFirstName(firstName);
+        setInternalLastName(lastName);
+      }}
+      onSubmit={() =>
+        updatePerson({
          variables: {
            id: currentRowEntityId,
-            firstName,
-            lastName,
+            firstName: internalFirstName,
+            lastName: internalLastName,
          },
-        });
+        })
+      }
+      onCancel={() => {
+        setInternalFirstName(firstName ?? '');
+        setInternalLastName(lastName ?? '');
      }}
    />
  );
--- a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx
+++ b/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 ?? ''}
-      onChange={async (newPhone: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
          variables: {
            id: currentRowEntityId,
-            phone: newPhone,
+            phone: internalValue,
          },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(phone ?? '')}
    />
  );
 }
--- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx
+++ b/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>
--- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
+++ b/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();
-  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],
-  );
+  useRegisterCloseCellHandlers(wrapperRef, onSubmit, onCancel);

  return (
    <EditableCellEditModeContainer
--- a/front/src/modules/ui/components/editable-cell/hooks/useEditableCell.ts
+++ b/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();

--- a/front/src/modules/ui/components/editable-cell/hooks/useRegisterCloseCellHandlers.ts
+++ b/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],
+  );
+}
--- a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx
+++ b/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}
--- a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx
+++ b/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;
-  onExit?: () => void;
+  onSubmit?: () => 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(firstValue, secondValue);
-      }
+      onSubmit?.();
    },
    InternalHotkeysScope.CellDoubleTextInput,
    [closeCell],
@ -68,9 +66,7 @@ export function EditableCellDoubleTextEditMode({
  useScopedHotkeys(
    Key.Escape,
    () => {
-      if (onExit) {
-        onExit();
-      }
+      onCancel?.();
      closeCell();
    },
    InternalHotkeysScope.CellDoubleTextInput,
@ -84,9 +80,7 @@ export function EditableCellDoubleTextEditMode({
        setFocusPosition('right');
        secondValueInputRef.current?.focus();
      } else {
-        if (onExit) {
-          onExit();
-        }
+        onSubmit?.();
        closeCell();
        moveRight();
      }
@ -102,6 +96,7 @@ export function EditableCellDoubleTextEditMode({
        setFocusPosition('left');
        firstValueInputRef.current?.focus();
      } else {
+        onSubmit?.();
        closeCell();
        moveLeft();
      }
--- a/front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx
+++ b/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}
    />
  );
 }
--- a/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx
+++ b/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 />
--- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
+++ b/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} />
--- a/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts
+++ b/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;
        }