Поле ввода, управляющее видимостью div с помощью обработчиков событий

Question

У меня есть приложение реагирования с полем input с onFocus и onBlur прослушивателями событий, например так:

<input 
  onFocus={e => {
    e.preventDefault();
    {
      this.setState({...this.state, showContainer:true})
    };
  }}
  onBlur={e => {
    e.preventDefault();
    {
      this.setState({...this.state, showContainer:false })
    };
  }} type="text"  className="headerSearch" />

У меня есть div контейнер с именем, скрытый / видимый на основена, если это поле ввода сосредоточено или нет.У меня проблема в том, что я не могу щелкнуть ссылку (или, может быть, что-нибудь вообще) внутри моего контейнера div, потому что как только я нажимаю на контейнер, вызывается onBlur, и мой div скрывается.

Разве это не правильный способ сделать что-то подобное?Я хочу, чтобы div отображался только в том случае, если поле ввода находится в фокусе, но мне также нужно иметь возможность щелкнуть сам элемент div ...

Кроме того, если я ухожу с текущей вкладки в Chrome, вызывается onBlurи мой контейнер div становится скрытым, что нежелательно.