Bug Fix: company create from people + scroll settings (#545)

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

@@ -20,9 +20,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
 
   return (
     <EditableCell
-      editHotkeysScope={
-        !isCreating ? { scope: InternalHotkeysScope.RelationPicker } : undefined
-      }
+      editHotkeysScope={{ scope: InternalHotkeysScope.RelationPicker }}
       editModeContent={
         isCreating ? (
           <PeopleCompanyCreateCell people={people} />

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

@@ -1,12 +1,10 @@
-import { useRef, useState } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useState } from 'react';
 import { v4 } from 'uuid';
 
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
 import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
-import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
-import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { EditableCellDoubleTextEditMode } from '@/ui/components/editable-cell/types/EditableCellDoubleTextEditMode';
 import { logError } from '@/utils/logs/logError';
 import {
   Person,
@@ -31,8 +29,6 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
   const [insertCompany] = useInsertCompanyMutation();
   const [updatePeople] = useUpdatePeopleMutation();
 
-  const containerRef = useRef(null);
-
   function handleDoubleTextChange(leftValue: string, rightValue: string): void {
     setCompanyDomainName(leftValue);
     setCompanyName(rightValue);
@@ -65,34 +61,18 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
       // TODO: handle error better
       logError(error);
     }
-
     setIsCreating(false);
   }
 
-  useHotkeys(
-    'enter, escape',
-    () => {
-      handleCompanyCreate(companyName, companyDomainName);
-    },
-    {
-      enableOnFormTags: true,
-      enableOnContentEditable: true,
-      preventDefault: true,
-    },
-    [companyName, companyDomainName, handleCompanyCreate],
-  );
-
-  useListenClickOutsideArrayOfRef([containerRef], () => {
-    handleCompanyCreate(companyName, companyDomainName);
-  });
-
   return (
-    <DoubleTextInput
-      leftValue={companyDomainName}
-      rightValue={companyName}
-      leftValuePlaceholder="URL"
-      rightValuePlaceholder="Name"
+    <EditableCellDoubleTextEditMode
+      firstValue={companyDomainName}
+      secondValue={companyName}
+      firstValuePlaceholder="URL"
+      secondValuePlaceholder="Name"
       onChange={handleDoubleTextChange}
+      onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
+      onExit={() => setIsCreating(false)}
     />
   );
 }

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

@@ -1,5 +1,6 @@
 import { Key } from 'ts-key-enum';
 
+import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
@@ -31,6 +32,8 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
 
   const { closeEditableCell } = useEditableCell();
 
+  const addToScopeStack = useAddToHotkeysScopeStack();
+
   const companies = useFilteredSearchEntityQuery({
     queryHook: useSearchCompanyQuery,
     selectedIds: [people.company?.id ?? ''],
@@ -59,6 +62,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
 
   function handleCreate() {
     setIsCreating(true);
+    addToScopeStack({ scope: InternalHotkeysScope.CellDoubleTextInput });
   }
 
   useScopedHotkeys(