Как сделать так, чтобы выпадающий список закрывался только по клику снаружи?

Question

У меня выпадающий список с несколькими вариантами выбора, проблема возникает, когда пользователь выбирает один элемент - раскрывающийся список закрыт.

Как сделать так, чтобы раскрывающийся список закрывался только при внешнем клике?

Выпадающий список сделан html ul> li:

// Here we loop trough list of filters and render options as <li> tags
 <ul name="filters" className="dropdown">
    {subFilters.map((filter, i) => (
      <li
        defaultChecked={filter.name}
        onClick={() => handleSelect(filter)}
        className={`option`}>
        <span>{filter.name}</span>
      </li>
    ))}
  </ul>

Css part - Используемые классы:

• dropdown для тега
• option для

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  position: absolute;
  z-index: 1;
  font-size: 16px;
  border-radius: 3px;
  border: solid 1px #dee1e5;
  box-shadow: 0 9px 8px rgba(0, 0, 0, 0.05);
  background-color: white;
  outline: none;
  cursor: pointer;
}

.option {
  list-style-type: none;
  padding: 10px 10px 10px 0;
  margin-left: 2.6rem;
}

Вот как выглядит этот выпадающий список:

Answer 1

Вы можете обработать это с помощью события onBlur.

Предположим, у вас есть такой фрагмент кода: <div class="dropdown" onBlur={() => this.handleBlur('myModal')}>Some content</div>

Сейчас this.handleBlur

handleBlur = modalName => {
    this.setState({ [modalName]: false });
};