feat: up auto focus

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",

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

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

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

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,48 +31,44 @@ 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)
               }
             })
           }
         }
       }
     },
-    [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
         )
       }
     }
 
+    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
 }