以编程方式触发 onClick 时，onBlur 不会触发

Question

I'm working with a React component:

<div
  ref={tooltipContainer}
  onClick={() => {
    console.log('onclick');
  }}
  onBlur={() => {
    console.log('onblur');
  }}
>
    // Hello
</div>

In my componentDidMount hook I'm triggering a click on the div which works as expected (shows the console log).

  useEffect(() => {
    if (someCondition) {
      tooltipContainer.current.click();
    }
  }, []);

However when I click anywhere else on the page the onBlur event isn't triggered. Shouldn't it since I programmatically clicked on the same element?

Answer 1

Apparently div doesn't have onBlur event handler if there is no contentEditable or tabindex=0 provided. But even with those, you'll still need some tweaks.

You want to make div focused on click, and clicking on it programmatically doesn't make it focused, so you'll have to add tooltipContainer.current.focus() under click()

 const myDiv = document.querySelector("#myDiv"); myDiv.click(); myDiv.focus();

 #myDiv { border: 1px solid green; padding: 1rem; }

 <div tabindex="0" onblur="alert('Hello!');" id="myDiv" >Click outside of the box!</div>