From fc8d7fa579ca2126de6301692e0022b5e22eeb8c Mon Sep 17 00:00:00 2001
From: Allan Oliveira <nallamo2016@gmail.com>
Date: Wed, 24 Apr 2024 09:59:01 -0300
Subject: [PATCH] feat: up auto focus

---
 package.json                                  |  2 +-
 .../Fields/AsyncSelect/AsyncSelect.tsx        |  2 +-
 .../molecules/Fields/Field/Field.tsx          |  2 +-
 .../molecules/Fields/Select/Select.tsx        |  2 +-
 src/hooks/useRegisterFieldFocus.ts            | 52 +++++++------------
 5 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index ffe1c96..e5cd07f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.3.11",
+  "version": "2.3.12",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
diff --git a/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx b/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx
index 4e3174f..e2598ab 100644
--- a/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx
+++ b/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx
@@ -171,7 +171,7 @@ const AsyncSelect = <FormType extends FieldValues>(props: AsyncSelectProps<FormT
     }
   }, [isSearchable, loadOptions])
 
-  const onKeyDownAuto = useRegisterFieldFocus(name)
+  const onKeyDownAuto = useRegisterFieldFocus(name, disabled)
 
   return (
     <RootContainer
diff --git a/src/components/molecules/Fields/Field/Field.tsx b/src/components/molecules/Fields/Field/Field.tsx
index c46caee..cc62e50 100644
--- a/src/components/molecules/Fields/Field/Field.tsx
+++ b/src/components/molecules/Fields/Field/Field.tsx
@@ -100,7 +100,7 @@ const Field = forwardRef<HTMLInputElement, FieldProps>((props, ref) => {
     setIsFocused(false)
   }
 
-  const onKeyDown = useRegisterFieldFocus(name)
+  const onKeyDown = useRegisterFieldFocus(name, disabled)
 
   return (
     <RootContainer
diff --git a/src/components/molecules/Fields/Select/Select.tsx b/src/components/molecules/Fields/Select/Select.tsx
index 5f0322a..5e0e8da 100644
--- a/src/components/molecules/Fields/Select/Select.tsx
+++ b/src/components/molecules/Fields/Select/Select.tsx
@@ -129,7 +129,7 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
     [isMulti, reactSelectStyles, selectedColor, styleMode]
   )
 
-  const onKeyDownAuto = useRegisterFieldFocus(name)
+  const onKeyDownAuto = useRegisterFieldFocus(name, disabled)
 
   return (
     <RootContainer
diff --git a/src/hooks/useRegisterFieldFocus.ts b/src/hooks/useRegisterFieldFocus.ts
index ab7db45..5607e33 100644
--- a/src/hooks/useRegisterFieldFocus.ts
+++ b/src/hooks/useRegisterFieldFocus.ts
@@ -1,35 +1,25 @@
-/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect } from 'react'
 
 import { AutoFocusContext } from 'contexts/AutoFocusContext'
 import { FieldNextFocusManagerContext } from 'contexts/FieldNextFocusManagerContext'
 
-export const useRegisterFieldFocus = (fieldName?: string | undefined) => {
+export const useRegisterFieldFocus = (
+  fieldName: string | undefined,
+  isDisabled: boolean | undefined
+) => {
   const sequentialFieldNamesRef = FieldNextFocusManagerContext.useSelector(
     state => state.sequentialFieldNamesRef
   )
 
-  useEffect(() => {
-    const t = setInterval(() => {
-      console.log(sequentialFieldNamesRef.current)
-    }, 1000)
-
-    return () => {
-      clearInterval(t)
-    }
-  }, [sequentialFieldNamesRef])
-
   const autoFocusContextValue = AutoFocusContext.useContext()
 
   const onKeyDown = useCallback(
     (e: any) => {
-      console.log('autoFocusContextValue', autoFocusContextValue)
-      console.log('sequentialFieldNamesRef', sequentialFieldNamesRef)
-
       if (
         !autoFocusContextValue?.setFocus ||
-        !Array.isArray(sequentialFieldNamesRef.current)
+        !Array.isArray(sequentialFieldNamesRef.current) ||
+        isDisabled
       ) {
         return
       }
@@ -41,19 +31,13 @@ export const useRegisterFieldFocus = (fieldName?: string | undefined) => {
           val => val === fieldName
         )
 
-        console.log('fieldIndex', fieldIndex)
-
         if (typeof fieldIndex === 'number' && fieldIndex !== -1) {
           const nextFieldNameIndex = fieldIndex + 1
           const nextFieldName = sequentialFieldNamesRef.current[nextFieldNameIndex]
 
-          console.log('nextFieldName', nextFieldName)
-
           if (nextFieldName) {
             autoFocusContextValue.trigger?.(fieldName).then(passed => {
               if (passed) {
-                console.log('called')
-
                 autoFocusContextValue.setFocus?.(nextFieldName)
               }
             })
@@ -61,19 +45,11 @@ export const useRegisterFieldFocus = (fieldName?: string | undefined) => {
         }
       }
     },
-    [autoFocusContextValue, fieldName, sequentialFieldNamesRef]
+    [autoFocusContextValue, fieldName, isDisabled, sequentialFieldNamesRef]
   )
 
   useEffect(() => {
-    if (fieldName && autoFocusContextValue?.setFocus) {
-      sequentialFieldNamesRef.current.push(fieldName)
-    }
-
-    return () => {
-      if (!autoFocusContextValue?.setFocus) {
-        return
-      }
-
+    const clear = () => {
       if (Array.isArray(sequentialFieldNamesRef.current)) {
         sequentialFieldNamesRef.current = sequentialFieldNamesRef.current.filter(
           val => val !== fieldName
@@ -81,8 +57,18 @@ export const useRegisterFieldFocus = (fieldName?: string | undefined) => {
       }
     }
 
+    if (isDisabled) {
+      return clear
+    }
+
+    if (fieldName && autoFocusContextValue?.setFocus) {
+      sequentialFieldNamesRef.current.push(fieldName)
+    }
+
+    return clear
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocusContextValue?.setFocus])
+  }, [autoFocusContextValue?.setFocus, isDisabled])
 
   return onKeyDown
 }