javascript - Delayed onBlur callback - Stack Overflow

admin管理员组

文章数量:1186154

I'm making an Autocomplete component in React which shows a dropdown of suggested completions as you type into a text box. Clicking on a suggestion should fire a callback, and the dropdown should disappear when the text box loses focus. The problem is that the onBlur event for the text box fires before the onClick event for the the suggestion, so what happens is:

1. Click on item
2. Text box loses focus => this.setState(this.getInitialState())
3. Component rerenders, with no suggestions box because state has been cleared
4. The click event lands on the empty space where the suggestion item used to be

What's the best way to solve this without resorting to a hack like onBlur={() => setTimeout(() => this.setState(this.getInitialState()), 100)}?

I'm making an Autocomplete component in React which shows a dropdown of suggested completions as you type into a text box. Clicking on a suggestion should fire a callback, and the dropdown should disappear when the text box loses focus. The problem is that the onBlur event for the text box fires before the onClick event for the the suggestion, so what happens is:

1. Click on item
2. Text box loses focus => this.setState(this.getInitialState())
3. Component rerenders, with no suggestions box because state has been cleared
4. The click event lands on the empty space where the suggestion item used to be

What's the best way to solve this without resorting to a hack like onBlur={() => setTimeout(() => this.setState(this.getInitialState()), 100)}?

• javascript
• reactjs

Share Improve this question Follow edited Apr 22, 2020 at 0:38 Tom Crockett asked Aug 24, 2016 at 23:40 Tom CrockettTom Crockett 31.6k99 gold badges7676 silver badges9191 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 28

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()}

Looks like there's an open source Autocomplete component and they had to tackle this exact problem.

本文标签： javascriptDelayed onBlur callbackStack Overflow