javascript - What is a better choice to hide an element rather than onBlur()?

Question

I have a created a custom searchable dropdown and when I focus on the input I show the dropdown and if I click somewhere else the dropdown is hidden by setting a piece of state that manages that using onBlur(). The problem is when I click on the dropdown elements to select an option the dropdown is closed before the event is fired, I added a timeout of 100ms before the setShowDropdown is set to false but I am not much satisfied and I was wondering what is a better approach?

  const [selected, setSelected] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [showDropdown, setShowDropdown] = useState(false);

dropdown elements:

 <li
          key={el}
          className={clsx(
            "custom-select__dropdown-item p-3 cursor-pointer flex justify-between hover:bg-fmc-blue-2 hover:text-white duration-300",
            selected === el ? "bg-fmc-blue-2 text-white" : "bg-white text-gray-500"
          )}
          onClick={() => {
          
            setSelected(el);
            setSearchValue("");
           
          }}
        >
          {el}
          <ChevronRight className="ml-2 text-fmc-blue-2" />
        </li>

Input on which I set whether to show the dropdown or not:

  <input
              type="text"
              onChange={(e) => setSearchValue(e.target.value.trim())}
              className="w-full mr-3 border-none h-full outline-none"
              placeholder={placeholder}
              onFocus={setShowDropdown.bind(null, true)}
              onBlur={() =>
                setTimeout(() => {
                  setShowDropdown(false);
                }, 100)
              }
              value={searchValue || selected}
            />

and the dropdown itself:

 <ul
        className={clsx(
          "custom-select__dropdown-list absolute top-16 w-full left-0 right-0 overflow-y-auto pb-2",
          !showDropdown && "hidden pointer-events-none"
        )}
      >
        {renderElements}
      </ul>

question from:https://stackoverflow.com/questions/65871695/what-is-a-better-choice-to-hide-an-element-rather-than-onblur

Answer 1

Waitting for answers