Feat/open input not focus (#811)

* Fixed click outside

* Finished

* Fixed tests

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

@@ -5,6 +5,7 @@ import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 
 import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode';
 import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useRegisterEditableCell } from '../hooks/useRegisterEditableCell';
 
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
@@ -48,6 +49,8 @@ export function EditableCell({
 
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
+  useRegisterEditableCell(editHotkeyScope);
+
   return (
     <CellBaseContainer>
       {isCurrentCellInEditMode ? (
@@ -62,7 +65,7 @@ export function EditableCell({
           {editModeContent}
         </EditableCellEditMode>
       ) : hasSoftFocus ? (
-        <EditableCellSoftFocusMode editHotkeyScope={editHotkeyScope}>
+        <EditableCellSoftFocusMode>
           {nonEditModeContent}
         </EditableCellSoftFocusMode>
       ) : (

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -40,6 +40,11 @@ export function EditableCellDisplayContainer({
 }: React.PropsWithChildren<Props>) {
   return (
     <EditableCellDisplayModeOuterContainer
+      data-testid={
+        softFocus
+          ? 'editable-cell-soft-focus-mode'
+          : 'editable-cell-display-mode'
+      }
       onClick={onClick}
       softFocus={softFocus}
     >

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx

@@ -1,3 +1,4 @@
+import { useEditableCell } from '../hooks/useEditableCell';
 import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
 
 import { EditableCellDisplayContainer } from './EditableCellContainer';
@@ -7,8 +8,11 @@ export function EditableCellDisplayMode({
 }: React.PropsWithChildren<unknown>) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
 
+  const { openEditableCell } = useEditableCell();
+
   function handleClick() {
     setSoftFocusOnCurrentCell();
+    openEditableCell();
   }
 
   return (

front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -9,22 +8,13 @@ import { useEditableCell } from '../hooks/useEditableCell';
 
 import { EditableCellDisplayContainer } from './EditableCellContainer';
 
-type OwnProps = PropsWithChildren<{
-  editHotkeyScope?: HotkeyScope;
-}>;
+type OwnProps = PropsWithChildren<unknown>;
 
-export function EditableCellSoftFocusMode({
-  children,
-  editHotkeyScope,
-}: OwnProps) {
+export function EditableCellSoftFocusMode({ children }: OwnProps) {
   const { openEditableCell } = useEditableCell();
 
   function openEditMode() {
-    openEditableCell(
-      editHotkeyScope ?? {
-        scope: TableHotkeyScope.CellEditMode,
-      },
-    );
+    openEditableCell();
   }
 
   useScopedHotkeys(

front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx

@@ -1,3 +1,4 @@
+import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -28,9 +29,18 @@ export const SoftFocusMode: Story = {
   ...DisplayMode,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
+
     await step('Click once', () =>
       userEvent.click(canvas.getByText('Content')),
     );
+
+    await step('Escape', () => {
+      userEvent.keyboard('{esc}');
+    });
+
+    await step('Has soft focus mode', () => {
+      expect(canvas.getByTestId('editable-cell-soft-focus-mode')).toBeDefined();
+    });
   },
 };
 
@@ -38,9 +48,15 @@ export const EditMode: Story = {
   ...DisplayMode,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
+
     const click = async () => userEvent.click(canvas.getByText('Content'));
 
     await step('Click once', click);
-    await step('Click twice', click);
+
+    await step('Has edit mode', () => {
+      expect(
+        canvas.getByTestId('editable-cell-edit-mode-container'),
+      ).toBeDefined();
+    });
   },
 };