onBlur下拉列表问题

Question

我正在使用dropdown进行搜索输入。问题出在onBlur上。如何在onBlur中忽略我的下拉列表？当我点击Input时，下拉菜单显示为onClick，当我点击其他地方时，它消失了。问题是，我点击下拉列表，它也消失了。以下是我的代码和沙箱link

<input
  className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-gray-300 focus:border-gray-500 focus:outline-none rounded py-3 px-4 mb-3"
  value={filter.mark}
  onChange={onChange}
  name="mark"
  id="mark"
  onClick={() => setDropdown(true)}
  onBlur={() => setDropdown(false)}
  placeholder="Выберите бренд"
  tabIndex={1}
/>

下拉列表

<div
  className="py-1"
  role="menu"
  aria-orientation="vertical"
  aria-labelledby="options-menu"
  name="mark"
>
  {CarMarkList.map((car) => {
    if (filter.mark !== 0) {
      if (
        car.name.toLowerCase().includes(filter.mark.toLowerCase()) ||
        car.name_rus.toLowerCase().includes(filter.mark.toLowerCase())
      ) {
        return (
          <div
            key={car.name}
            onClick={dropdownChange}
            id="mark"
            value={filter.mark}
            className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
          >
            {car.name}
          </div>
        )
      } else {
        return null
      }
    }
    return (
      <div
        key={car.name}
        onClick={dropdownChange}
        id="mark"
        value={filter.mark}
        className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
      >
        {car.name}
      </div>
    )
  })}
</div>

Answer 1

这是有意义的，因为您的下拉列表在您的输入之外，所以当您单击它时，它实际上从输入中移除了焦点。

这里最好的解决方案是将它们都包装在div (或其他任何东西)中，并在选择某个选项时或在该div之外单击时关闭下拉菜单。这是我做的一个CodeSandbox：

https://codesandbox.io/s/fragrant-bash-og2mq?file=/src/App.js