根据输入文本字段的焦点来反应条件渲染

Question

I have a Search component, which renders these child components: SearchBar and Suggestions.

I want to render Suggestions only if the input in SearchBar has focus. I used the event onFocus for this, which triggers a callback inside the parent component (Search). When I click outside the input field i use onBlur. The conditional rendering works, however there's a problem.

Inside my Suggestions component, I list a few elements. If the user clicks on an element, I trigger a onClick event. The problem is, however, that when the user clicks on an element, the onBlur event is naturally also triggered which causes the entire Suggestions component to disappear. This results in the onClick event not being triggered..

I am really stuck on this problem, any ideas?

Answer 1

One solution is not to use OnBlur, but instead capture click / or focus events on a root element, then check to see if you want to then close.

Below is a working snippet showing this, click into the edit and a list will appear, you can then click on the list items and it will console log one or two without closing. But if you click on anything else it will then close.

The example just uses a simple className check to see if the current target element has the class no-close , if not it will close the list.

 class Form extends React.Component { constructor () { super(); this.state = {showList: false}; } render () { return <div onClick={ (e) => { if (!e.target.classList.contains("no-close")) this.setState({showList: false}); } }> <input className="no-close" onFocus={() => this.setState({showList: true})}/> {this.state.showList ? <div> <ul> <li className="no-close" onClick={() => console.log("one")}>One</li> <li className="no-close" onClick={() => console.log("two")}>Two</li> </ul> </div> : null} <div><br/><br/>Just some text, clicking this should not keep list open, if it's open</div> </div> } } ReactDOM.render(<Form/>, document.getElementById("mount")); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="mount"></div>