Use onMouseDown instead of setTimeout to manage focus (#103)

Author: souporserious

src/components/FocusManager.js

@@ -2,35 +2,40 @@ import * as React from 'react'
 import State from './State'
 import renderProps from '../utils/renderProps'
 
-const FocusManager = ({ onChange, ...props }) => (
-  <State
-    initial={{ isFocused: false, timeoutId: null }}
-    onChange={({ isFocused }) => onChange && onChange({ isFocused })}
-  >
-    {({ state, setState }) =>
-      renderProps(props, {
-        isFocused: state.isFocused,
-        blur: () => {
-          setState({ isFocused: false })
-        },
-        bind: {
-          tabIndex: -1,
-          onBlur: () => {
-            // the timeoutId is saved in state to not cleanup in a rerender
-            setState({
-              timeoutId: setTimeout(() => {
-                setState({ isFocused: false })
-              }),
-            })
+const FocusManager = ({ onChange, ...props }) => {
+  let canBlur = true
+  return (
+    <State
+      initial={{ isFocused: false }}
+      onChange={({ isFocused }) => onChange && onChange({ isFocused })}
+    >
+      {({ state, setState }) =>
+        renderProps(props, {
+          isFocused: state.isFocused,
+          blur: () => {
+            setState({ isFocused: false })
           },
-          onFocus: () => {
-            clearTimeout(state.timeoutId)
-            setState({ isFocused: true })
+          bind: {
+            tabIndex: -1,
+            onBlur: () => {
+              if (canBlur) {
+                setState({ isFocused: false })
+              }
+            },
+            onFocus: () => {
+              setState({ isFocused: true })
+            },
+            onMouseDown: () => {
+              canBlur = false
+            },
+            onMouseUp: () => {
+              canBlur = true
+            },
           },
-        },
-      })
-    }
-  </State>
-)
+        })
+      }
+    </State>
+  )
+}
 
 export default FocusManager