441/fix/clear cell while opening it by typing and delete value when I hit delete / backspace. (#2021)

- Use initial values when opening table cells and pass them to fields

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/object/record-table/states/tableCellInitialValueFamilyState.ts

@@ -0,0 +1,12 @@
+import { atomFamily } from 'recoil';
+
+import { TableCellInitialValue } from '../types/TableCellInitialValue';
+import { TableCellPosition } from '../types/TableCellPosition';
+
+export const tableCellInitialValueFamilyState = atomFamily<
+  TableCellInitialValue | undefined,
+  TableCellPosition
+>({
+  key: 'tableCellInitialValueFamilyState',
+  default: undefined,
+});

front/src/modules/ui/object/record-table/table-cell/components/TableCell.tsx

@@ -1,13 +1,8 @@
-import { useContext } from 'react';
-
-import { IconArrowUpRight } from '@/ui/display/icon';
 import { FieldDisplay } from '@/ui/object/field/components/FieldDisplay';
 import { FieldInput } from '@/ui/object/field/components/FieldInput';
-import { useGetButtonIcon } from '@/ui/object/field/hooks/useGetButtonIcon';
 import { FieldInputEvent } from '@/ui/object/field/types/FieldInputEvent';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
 import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
 import { useTableCell } from '../hooks/useTableCell';
 
@@ -18,10 +13,6 @@ export const TableCell = ({
 }: {
   customHotkeyScope: HotkeyScope;
 }) => {
-  const isFirstColumn = useContext(ColumnIndexContext) === 0;
-
-  const buttonIcon = useGetButtonIcon();
-
   const { closeTableCell } = useTableCell();
 
   const { moveLeft, moveRight, moveDown } = useMoveSoftFocus();
@@ -72,7 +63,6 @@ export const TableCell = ({
         />
       }
       nonEditModeContent={<FieldDisplay />}
-      buttonIcon={isFirstColumn ? IconArrowUpRight : buttonIcon}
     ></TableCellContainer>
   );
 };

front/src/modules/ui/object/record-table/table-cell/components/TableCellContainer.tsx

@@ -1,7 +1,8 @@
 import { ReactElement, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconArrowUpRight } from '@/ui/display/icon';
+import { useGetButtonIcon } from '@/ui/object/field/hooks/useGetButtonIcon';
 import { useIsFieldEmpty } from '@/ui/object/field/hooks/useIsFieldEmpty';
 import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -39,7 +40,6 @@ export type TableCellContainerProps = {
   editHotkeyScope?: HotkeyScope;
   transparent?: boolean;
   maxContentWidth?: number;
-  buttonIcon?: IconComponent;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -54,7 +54,6 @@ export const TableCellContainer = ({
   editModeContent,
   nonEditModeContent,
   editHotkeyScope,
-  buttonIcon,
 }: TableCellContainerProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
 
@@ -95,6 +94,12 @@ export const TableCellContainer = ({
 
   const isEmpty = useIsFieldEmpty();
 
+  const isFirstColumn = useContext(ColumnIndexContext) === 0;
+
+  const customButtonIcon = useGetButtonIcon();
+
+  const buttonIcon = isFirstColumn ? IconArrowUpRight : customButtonIcon;
+
   const showButton =
     !!buttonIcon &&
     hasSoftFocus &&

front/src/modules/ui/object/record-table/table-cell/components/TableCellSoftFocusMode.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren, useEffect, useRef } from 'react';
+import { Key } from 'ts-key-enum';
 
 import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly';
 import { useToggleEditOnlyInput } from '@/ui/object/field/hooks/useToggleEditOnlyInput';
@@ -26,7 +27,25 @@ export const TableCellSoftFocusMode = ({
   }, []);
 
   useScopedHotkeys(
-    'enter',
+    [Key.Backspace, Key.Delete],
+    () => {
+      if (!isFieldInputOnly) {
+        openTableCell({
+          initialValue: {
+            isEmpty: true,
+          },
+        });
+      }
+    },
+    TableHotkeyScope.TableSoftFocus,
+    [openTableCell],
+    {
+      enabled: !isFieldInputOnly,
+    },
+  );
+
+  useScopedHotkeys(
+    Key.Enter,
     () => {
       if (!isFieldInputOnly) {
         openTableCell();
@@ -42,6 +61,10 @@ export const TableCellSoftFocusMode = ({
     '*',
     (keyboardEvent) => {
       if (!isFieldInputOnly) {
+        keyboardEvent.preventDefault();
+        keyboardEvent.stopPropagation();
+        keyboardEvent.stopImmediatePropagation();
+
         const isWritingText =
           !isNonTextWritingKey(keyboardEvent.key) &&
           !keyboardEvent.ctrlKey &&
@@ -51,7 +74,11 @@ export const TableCellSoftFocusMode = ({
           return;
         }
 
-        openTableCell();
+        openTableCell({
+          initialValue: {
+            value: keyboardEvent.key,
+          },
+        });
       }
     },
     TableHotkeyScope.TableSoftFocus,

front/src/modules/ui/object/record-table/table-cell/hooks/useCurrentTableCellInitialValue.ts

@@ -0,0 +1,17 @@
+import { useRecoilState } from 'recoil';
+
+import { tableCellInitialValueFamilyState } from '../../states/tableCellInitialValueFamilyState';
+
+import { useCurrentTableCellPosition } from './useCurrentCellPosition';
+
+export const useCurrentTableCellInitialValue = () => {
+  const currentTableCellPosition = useCurrentTableCellPosition();
+
+  const [currentTableCellInitialValue, setCurrentTableCellInitialValue] =
+    useRecoilState(tableCellInitialValueFamilyState(currentTableCellPosition));
+
+  return {
+    currentTableCellInitialValue,
+    setCurrentTableCellInitialValue,
+  };
+};

front/src/modules/ui/object/record-table/table-cell/hooks/useTableCell.ts

@@ -1,8 +1,11 @@
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 
 import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
 import { useIsFieldEmpty } from '@/ui/object/field/hooks/useIsFieldEmpty';
+import { entityFieldInitialValueFamilyState } from '@/ui/object/field/states/entityFieldInitialValueFamilyState';
+import { FieldInitialValue } from '@/ui/object/field/types/FieldInitialValue';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -28,12 +31,6 @@ export const useTableCell = () => {
 
   const customCellHotkeyScope = useContext(CellHotkeyScopeContext);
 
-  const closeTableCell = () => {
-    setDragSelectionStartEnabled(true);
-    closeCurrentTableCellInEditMode();
-    setHotkeyScope(TableHotkeyScope.TableSoftFocus);
-  };
-
   const navigate = useNavigate();
 
   const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
@@ -42,7 +39,14 @@ export const useTableCell = () => {
 
   const { entityId, fieldDefinition } = useContext(FieldContext);
 
-  const openTableCell = () => {
+  const [, setFieldInitialValue] = useRecoilState(
+    entityFieldInitialValueFamilyState({
+      entityId,
+      fieldId: fieldDefinition.fieldId,
+    }),
+  );
+
+  const openTableCell = (options?: { initialValue?: FieldInitialValue }) => {
     if (isFirstColumnCell && !isEmpty && fieldDefinition.basePathToShowPage) {
       navigate(`${fieldDefinition.basePathToShowPage}${entityId}`);
       return;
@@ -51,6 +55,10 @@ export const useTableCell = () => {
     setDragSelectionStartEnabled(false);
     setCurrentTableCellInEditMode();
 
+    if (options?.initialValue) {
+      setFieldInitialValue(options.initialValue);
+    }
+
     if (customCellHotkeyScope) {
       setHotkeyScope(
         customCellHotkeyScope.scope,
@@ -61,6 +69,13 @@ export const useTableCell = () => {
     }
   };
 
+  const closeTableCell = () => {
+    setDragSelectionStartEnabled(true);
+    closeCurrentTableCellInEditMode();
+    setFieldInitialValue(undefined);
+    setHotkeyScope(TableHotkeyScope.TableSoftFocus);
+  };
+
   return {
     closeTableCell,
     openTableCell,