Как сделать анфокус инпута при нажатии на любую область кроме инпут дропдауна?

Question

[I_Love_Emma_Watson]

Такой код jsfiddle
как сделать чтобы инпут анфокусился при нажатии мыши на любые области, кроме списка результатов, как это реализовано в поиске гугла например, я там сделал handleUnfocus для примера, только он конечно же работает при нажатии на любую область

Answer 1

[vaskadogana]

https://github.com/tj/react-click-outside
или

handleClick() {
	    if (!this.state.active) {
	      // attach/remove event handler
	      document.addEventListener('click', this.handleOutsideClick, false);
	    } else {
	      document.removeEventListener('click', this.handleOutsideClick, false);
	    }
	    this.setState(prevState => ({
	       active: !prevState.active,
	    }));
	}
	handleOutsideClick(e) {
	    // ignore clicks on the component itself
	    console.log('EVENT handleOutsideClick ', e)
	    if (this.node.contains(e.target)) {
	    	
	      return;
	    }
	    
	    this.handleClick();
	}

на элемент за пределами которого кликают добавить ref

ref={node => { this.node = node; }}

<li className='notif_container' ref={node => { this.node = node; }}>
						{this.button()}
					</li>

Comments

[vaskadogana]

в случае с ClickOutside

<ClickOutside onClickOutside={this.close} className='SelectListDate_container'>
элемент за пределами котого происходит клик
</ClickOutside>