Merge pull request #8 from voxtex/autofocus-fix

handle null method when using autofocus on field

Author: erikras

src/useField.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { fieldSubscriptionItems } from 'final-form'
 
 export const all = fieldSubscriptionItems.reduce((result, key) => {
@@ -7,11 +7,23 @@ export const all = fieldSubscriptionItems.reduce((result, key) => {
 }, {})
 
 const useField = (name, form, subscription) => {
+  const autoFocus = useRef(false)
   const [state, setState] = useState({})
-  useEffect(() => form.registerField(name, setState, subscription || all), [
-    name,
-    subscription
-  ])
+  useEffect(
+    () =>
+      form.registerField(
+        name,
+        newState => {
+          if (autoFocus.current) {
+            autoFocus.current = false
+            setTimeout(() => newState.focus())
+          }
+          setState(newState)
+        },
+        subscription || all
+      ),
+    [name, subscription]
+  )
   let { blur, change, focus, value, ...meta } = state || {}
   delete meta.name // it's in input
   return {
@@ -21,7 +33,13 @@ const useField = (name, form, subscription) => {
       onBlur: () => state.blur(),
       onChange: event =>
         state.change(event.target ? event.target.value : event),
-      onFocus: () => state.focus()
+      onFocus: () => {
+        if (state.focus) {
+          state.focus()
+        } else {
+          autoFocus.current = true
+        }
+      }
     },
     meta
   }