diff --git a/src/components/FocusManager.js b/src/components/FocusManager.js index 9c06beac..823dcc49 100644 --- a/src/components/FocusManager.js +++ b/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 }) => ( - 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 ( + 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 + }, }, - }, - }) - } - -) + }) + } + + ) +} export default FocusManager