Обновление компонента React до запуска события Dom (onBlur и onClick)

Question

У меня есть компонент списка реагирующих данных (поле ввода и список опций) и два события Dom, которые я слушаю.

1. onBlur поля ввода
2. onClick элементов списка

Проблема в том, что событие onBlur скрывает элементы списка.

Когда я щелкаю элемент, сначала запускается событие onBlur, и обновляются элементы списка, которые должны быть скрыты.Очевидно, что при обновлении элементов списка их событие onClick никогда не запускается.

Прямо сейчас я помещаю событие onBlur в тайм-аут на 500 мс, но это кажется хакерским и не очень приятным для пользователя.

Есть ли общее решение этой проблемы?

Вот пример кода: Ссылка на Codepen

class DatalistOption extends React.Component {
  handleClick = (evt) => {
    console.log("onClick for Option called")
    this.props.select(evt);
  }

  ...
}


class ReactDatalist extends React.Component {
  ...
  handleInputBlur = () => {
    console.log("onBlur called")
    //setTimeout(() => this.setState({ hide: true }), 500); // such a hack, that I am ashamed...
    this.setState({ hide: true })
  }
}