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?

score 6 · Answer 1 · answered Jul 29 '20 at 21:22

6

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.

answered Jul 29 '20 at 21:22

Job Ouddeken

183
1
8

That div does not receive focus. Adding an onClick does not add focus to that element as long as that element does not have tabindex="0". Take a look at this answer about focus on elements: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus – Job Ouddeken Jul 29 '20 at 21:29

score 0 · Answer 2 · answered Sep 04 '22 at 00:18

0

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

answered Sep 04 '22 at 00:18

soujvnunes

73
1
7

score 0 · Answer 3 · answered Jul 01 '23 at 08:07

Place a tabIndex to make it focusable, and its important that this property is before your event caller, otherwise it won't work

// ...
<div tabIndex={0} onClick={() => setShowOptions(!showOptions)} onBlur={hideDropdown}>
  <Select>
    {value !== null ? _.find(options, { value }).label : placeholder}
  </Select>
</div>
// ...

React on Blur not being called

3 Answers3