Delayed onBlur callback
Looks like there's an open source Autocomplete
component and they had to tackle this exact problem.
Found a very simple solution: the mousedown
event fires for the result item being clicked before blur
fires for the text input. Furthermore if the mousedown
callback calls event.preventDefault()
, it prevents the blur
event from firing for the input, but doesn't prevent the future click
event from firing on the result item once mouseup
occurs. So, long story short, simply adding this handler to the result item fixes everything: onMouseDown={event => event.preventDefault()}