Fix: hotkey scope not correctly set (#2094)

* technical input fix

* use previous hotkey instead for onblur

front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -2,9 +2,12 @@ import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { FieldRecoilScopeContext } from '@/ui/data/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
+import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
+
 type CompanyNameEditableFieldProps = {
   company: Pick<Company, 'id' | 'name'>;
 };
@@ -40,6 +43,11 @@ export const CompanyNameEditableField = ({
 
   const [updateCompany] = useUpdateOneCompanyMutation();
 
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
+
   useEffect(() => {
     setInternalValue(company.name);
   }, [company.name]);
@@ -49,6 +57,7 @@ export const CompanyNameEditableField = ({
   };
 
   const handleSubmit = async () => {
+    goBackToPreviousHotkeyScope();
     await updateCompany({
       variables: {
         where: {
@@ -61,12 +70,19 @@ export const CompanyNameEditableField = ({
     });
   };
 
+  const handleFocus = async () => {
+    setHotkeyScopeAndMemorizePreviousScope(
+      EditableFieldHotkeyScope.EditableField,
+    );
+  };
+
   return (
     <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
       <StyledEditableTitleInput
         autoComplete="off"
         onChange={(event) => handleChange(event.target.value)}
         onBlur={handleSubmit}
+        onFocus={handleFocus}
         value={internalValue}
       />
     </RecoilScope>

front/src/modules/companies/editable-field/types/EditableFieldHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum EditableFieldHotkeyScope {
+  EditableField = 'editable-field',
+}

front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx

@@ -3,6 +3,9 @@ import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/data/field/meta-types/input/components/internal/TextInput';
 import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
+import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
 export type EntityTitleDoubleTextInputProps = {
   firstValue: string;
@@ -38,32 +41,48 @@ export const EntityTitleDoubleTextInput = ({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
-}: EntityTitleDoubleTextInputProps) => (
+}: EntityTitleDoubleTextInputProps) => {
-  <StyledDoubleTextContainer>
+  const {
-    <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
+    goBackToPreviousHotkeyScope,
-      {(nodeDimensions) => (
+    setHotkeyScopeAndMemorizePreviousScope,
-        <StyledTextInput
+  } = usePreviousHotkeyScope();
-          width={nodeDimensions?.width}
+  const handleFocus = () => {
-          placeholder={firstValuePlaceholder}
+    setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
-          value={firstValue}
+  };
-          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+  const handleBlur = () => {
-            onChange(event.target.value, secondValue);
+    goBackToPreviousHotkeyScope();
-          }}
+  };
-        />
+
-      )}
+  return (
-    </ComputeNodeDimensions>
+    <StyledDoubleTextContainer>
-    <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
+      <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
-      {(nodeDimensions) => (
+        {(nodeDimensions) => (
-        <StyledTextInput
+          <StyledTextInput
-          width={nodeDimensions?.width}
+            width={nodeDimensions?.width}
-          autoComplete="off"
+            placeholder={firstValuePlaceholder}
-          placeholder={secondValuePlaceholder}
+            value={firstValue}
-          value={secondValue}
+            onFocus={handleFocus}
-          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onBlur={handleBlur}
-            onChange(firstValue, event.target.value);
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          }}
+              onChange(event.target.value, secondValue);
-        />
+            }}
-      )}
+          />
-    </ComputeNodeDimensions>
+        )}
-  </StyledDoubleTextContainer>
+      </ComputeNodeDimensions>
-);
+      <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
+        {(nodeDimensions) => (
+          <StyledTextInput
+            width={nodeDimensions?.width}
+            autoComplete="off"
+            placeholder={secondValuePlaceholder}
+            value={secondValue}
+            onFocus={handleFocus}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(firstValue, event.target.value);
+            }}
+          />
+        )}
+      </ComputeNodeDimensions>
+    </StyledDoubleTextContainer>
+  );
+};