feat: up auto focus

package.json

@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.3.12",
+  "version": "2.3.13",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

src/contexts/AutoFocusContext.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FieldValues, UseFormSetFocus, UseFormTrigger } from 'react-hook-form'
 
 import { createContext } from '@nexpy/react-easy-context-api'
@@ -26,14 +26,13 @@ export const AutoFocus = <FormValues extends FieldValues>({
   trigger,
   setFocus,
 }: AutoFocusProviderProps<FormValues>) => {
-  return (
-    <AutoFocusContext.Provider
-      value={{
-        trigger,
-        setFocus,
-      }}
-    >
-      {children}
-    </AutoFocusContext.Provider>
+  const value = useMemo(
+    () => ({
+      trigger,
+      setFocus,
+    }),
+    [setFocus, trigger]
   )
+
+  return <AutoFocusContext.Provider value={value}>{children}</AutoFocusContext.Provider>
 }

src/contexts/FieldNextFocusManagerContext.tsx

@@ -1,11 +1,13 @@
-import React, { useRef, MutableRefObject } from 'react'
+import React, { useRef, MutableRefObject, useState, useCallback, useMemo } from 'react'
 
 import { createContext } from '@nexpy/react-easy-context-api'
 
 import { WithChildren } from 'types'
 
 type FieldNextFocusManagerContextValue = {
   sequentialFieldNamesRef: MutableRefObject<string[]>
+  renderIndex: number
+  dispatch: () => void
 }
 
 export const FieldNextFocusManagerContext =
@@ -14,10 +16,21 @@ export const FieldNextFocusManagerContext =
   )
 
 export const FieldNextFocusManagerProvider = ({ children }: WithChildren) => {
+  const [renderIndex, setRenderIndex] = useState<number>(0)
+
   const sequentialFieldNamesRef = useRef<string[]>([])
 
+  const dispatch = useCallback(() => {
+    setRenderIndex(prev => prev + 1)
+  }, [])
+
+  const value = useMemo(
+    () => ({ sequentialFieldNamesRef, renderIndex, dispatch }),
+    [dispatch, renderIndex]
+  )
+
   return (
-    <FieldNextFocusManagerContext.Provider value={{ sequentialFieldNamesRef }}>
+    <FieldNextFocusManagerContext.Provider value={value}>
       {children}
     </FieldNextFocusManagerContext.Provider>
   )

src/contexts/ModalPortalDedupleContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { createContext } from '@nexpy/react-easy-context-api'
 
@@ -12,10 +12,12 @@ export const ModalPortalDedupleContext = createContext<ModalPortalDedupleContext
   parentModalAlreadyExistsUsingPortal: false,
 })
 
-export const ModalPortalDedupleProvider = ({ children }: WithChildren) => (
-  <ModalPortalDedupleContext.Provider
-    value={{ parentModalAlreadyExistsUsingPortal: true }}
-  >
-    {children}
-  </ModalPortalDedupleContext.Provider>
-)
+export const ModalPortalDedupleProvider = ({ children }: WithChildren) => {
+  const value = useMemo(() => ({ parentModalAlreadyExistsUsingPortal: true }), [])
+
+  return (
+    <ModalPortalDedupleContext.Provider value={value}>
+      {children}
+    </ModalPortalDedupleContext.Provider>
+  )
+}

src/hooks/useRegisterFieldFocus.ts

@@ -11,6 +11,8 @@ export const useRegisterFieldFocus = (
   const sequentialFieldNamesRef = FieldNextFocusManagerContext.useSelector(
     state => state.sequentialFieldNamesRef
   )
+  const renderIndex = FieldNextFocusManagerContext.useSelector(state => state.renderIndex)
+  const dispatch = FieldNextFocusManagerContext.useSelector(state => state.dispatch)
 
   const autoFocusContextValue = AutoFocusContext.useContext()
 
@@ -68,7 +70,13 @@ export const useRegisterFieldFocus = (
     return clear
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocusContextValue?.setFocus, isDisabled])
+  }, [autoFocusContextValue?.setFocus, isDisabled, renderIndex])
+
+  useEffect(() => {
+    dispatch()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisabled])
 
   return onKeyDown
 }