React on Blur not being called

Question

I am not sure but onblur doesn't seem to be working for me.

So this the component I have

export default function Dropdown({
  onChange,
  value,
  placeholder,
  options,
  error,
}) {
  const [showOptions, setShowOptions] = useState(false);

  const hideDropdown = () => {
    console.log("Hello");
    if (showOptions) {
      setShowOptions(false);
    }
  };
  useEffect(() => {
    if (showOptions) {
      hideDropdown();
    }
  }, [value]);
  return (
    <DropdownMain>
      <div onClick={() => setShowOptions(!showOptions)} onBlur={hideDropdown}>
        <Select>
          {value !== null ? _.find(options, { value }).label : placeholder}
        </Select>
      </div>
      <SelectIndicator></SelectIndicator>
      {showOptions &&
        (options || []).map((option, indez) => (
          <Option
            onClick={() => onChange(option.value)}
            key={`dropdownOption${indez}`}
          >
            {option.label}
          </Option>
        ))}
    </DropdownMain>
  );
}

I expect it to lose focuse when user clicks somewhere else and dropdown should close and for that I was using onBlure but that doesn't seem to be working. Any Idea on how I can fix it?

Answer 1

The problem here is that the div you added the onBlur on never receives focus. This results in the onBlur not being fired at all, since onBlur is only fired when an element loses focus. Try adding the onBlur on the actual component that receives the focus.

Answer 2

Add tabindex={0}, so the element div can be focusable.