Feat/open input not focus (#811)

* Fixed click outside

* Finished

* Fixed tests

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

@@ -3,12 +3,20 @@ import { useRecoilCallback } from 'recoil';
 import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 
+import { useContextScopeId } from '../../../recoil-scope/hooks/useContextScopeId';
+import { getSnapshotScopedState } from '../../../recoil-scope/utils/getSnapshotScopedState';
 import { useCloseCurrentCellInEditMode } from '../../hooks/useClearCellInEditMode';
+import { CellContext } from '../../states/CellContext';
 import { isSomeInputInEditModeState } from '../../states/isSomeInputInEditModeState';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
+import { customCellHotkeyScopeScopedState } from '../states/customCellHotkeyScopeScopedState';
 
 import { useCurrentCellEditMode } from './useCurrentCellEditMode';
 
+const DEFAULT_CELL_SCOPE: HotkeyScope = {
+  scope: TableHotkeyScope.CellEditMode,
+};
+
 export function useEditableCell() {
   const { setCurrentCellInEditMode } = useCurrentCellEditMode();
 
@@ -16,6 +24,8 @@ export function useEditableCell() {
 
   const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
 
+  const cellContextId = useContextScopeId(CellContext);
+
   function closeEditableCell() {
     closeCurrentCellInEditMode();
     setHotkeyScope(TableHotkeyScope.TableSoftFocus);
@@ -23,20 +33,36 @@ export function useEditableCell() {
 
   const openEditableCell = useRecoilCallback(
     ({ snapshot, set }) =>
-      (HotkeyScope: HotkeyScope) => {
+      () => {
         const isSomeInputInEditMode = snapshot
           .getLoadable(isSomeInputInEditModeState)
           .valueOrThrow();
 
+        const customCellHotkeyScope = getSnapshotScopedState({
+          snapshot,
+          state: customCellHotkeyScopeScopedState,
+          contextScopeId: cellContextId,
+        });
+
         if (!isSomeInputInEditMode) {
           set(isSomeInputInEditModeState, true);
 
           setCurrentCellInEditMode();
 
-          setHotkeyScope(HotkeyScope.scope);
+          if (customCellHotkeyScope) {
+            setHotkeyScope(
+              customCellHotkeyScope.scope,
+              customCellHotkeyScope.customScopes,
+            );
+          } else {
+            setHotkeyScope(
+              DEFAULT_CELL_SCOPE.scope,
+              DEFAULT_CELL_SCOPE.customScopes,
+            );
+          }
         }
       },
-    [setCurrentCellInEditMode, setHotkeyScope],
+    [setCurrentCellInEditMode, setHotkeyScope, cellContextId],
   );
 
   return {

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

@@ -16,9 +16,12 @@ export function useRegisterCloseCellHandlers(
   const { isCurrentCellInEditMode } = useCurrentCellEditMode();
   useListenClickOutsideArrayOfRef({
     refs: [wrapperRef],
-    callback: () => {
+    callback: (event) => {
       if (isCurrentCellInEditMode) {
+        event.stopImmediatePropagation();
+
         onSubmit?.();
+
         closeEditableCell();
       }
     },

front/src/modules/ui/table/editable-cell/hooks/useRegisterEditableCell.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+
+import { useRecoilScopedState } from '../../../recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '../../states/CellContext';
+import { TableHotkeyScope } from '../../types/TableHotkeyScope';
+import { customCellHotkeyScopeScopedState } from '../states/customCellHotkeyScopeScopedState';
+
+const DEFAULT_CELL_SCOPE: HotkeyScope = {
+  scope: TableHotkeyScope.CellEditMode,
+};
+
+export function useRegisterEditableCell(cellHotkeyScope?: HotkeyScope) {
+  const [, setCustomCellHotkeyScope] = useRecoilScopedState(
+    customCellHotkeyScopeScopedState,
+    CellContext,
+  );
+
+  useEffect(() => {
+    setCustomCellHotkeyScope(cellHotkeyScope ?? DEFAULT_CELL_SCOPE);
+  }, [cellHotkeyScope, setCustomCellHotkeyScope]);
+}