fix(ui): losing focus after input

Author: AlexPalaz

src/app/components/EditorContacts.tsx

@@ -5,7 +5,7 @@ import {
   Table,
   UncontrolledTooltip,
 } from "design-react-kit";
-import { get } from "lodash";
+import { debounce, get } from "lodash";
 import { useController, useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -34,6 +34,9 @@ export default function EditorContacts(): JSX.Element {
   });
   const { t } = useTranslation();
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const debouncedOnChangeRef = useRef<
+    Record<string, ReturnType<typeof debounce>>
+  >({});
 
   return (
     <div className="form-group">
@@ -88,21 +91,31 @@ export default function EditorContacts(): JSX.Element {
                           value === ""
                             ? undefined
                             : value,
-                      },
+                      }
                     );
 
+                    const fieldKey = `${index}.${subfield}`;
+                    if (!debouncedOnChangeRef.current[fieldKey]) {
+                      debouncedOnChangeRef.current[fieldKey] = debounce(
+                        reg.onChange,
+                        500
+                      );
+                    }
+
                     return (
                       <td key={subfield}>
                         <Input
                           {...reg}
+                          onChange={debouncedOnChangeRef.current[fieldKey]}
+                          label={true}
                           innerRef={ref}
                           valid={
                             get(errors, `${fieldName}.${index}.${subfield}`) &&
                             false
                           }
                           validationText={get(
                             errors,
-                            `${fieldName}.${index}.${subfield}.message`,
+                            `${fieldName}.${index}.${subfield}.message`
                           )}
                         />
                       </td>

src/app/components/EditorDescriptionInput.tsx

@@ -50,7 +50,7 @@ export default function EditorInput<
 
   useEffect(() => {
     const tooltipTriggerList = document.querySelectorAll(
-      '[data-bs-toggle="tooltip"]',
+      '[data-bs-toggle="tooltip"]'
     );
     tooltipTriggerList.forEach((tooltipTriggerEl) => {
       new Tooltip(tooltipTriggerEl);
@@ -83,6 +83,7 @@ export default function EditorInput<
           name={name}
           value={(value as string) || ""}
           innerRef={ref}
+          label={true}
           // label={`${label}${extraLangInfo}${required ? " *" : ""}${
           //   deprecated ? ` - ${t(`editor.form.deprecatedField`)}` : ""
           // }`}
@@ -91,7 +92,7 @@ export default function EditorInput<
           valid={get(errors, `description.${lang}.${fieldName}`) && false}
           validationText={get(
             errors,
-            `description.${lang}.${fieldName}.message`,
+            `description.${lang}.${fieldName}.message`
           )}
           rows={textarea ? 3 : undefined}
         />

src/app/components/EditorInput.tsx

@@ -71,6 +71,7 @@ export default function EditorInput<
         name={name}
         value={value || ""}
         innerRef={ref}
+        label={true}
         // label={`${label}${required ? " *" : ""}${
         //   deprecated ? ` - ${t(`editor.form.deprecatedField`)}` : ""
         // }`}