[FEAT REQ] Prefer focusin and focusout events over focus and blur

[maxrchung]

Is your feature request related to a problem? Please describe.
I am implementing a copy button that on click will show a tooltip notifying you that you've copied some text. I've had difficulty with using the blur close event and narrowed it down to the fact it is not bubbling as expected to its parent.

I have a setup similar to this:

<>
  <span data-tooltip-id="my-wrapper">
    <button>My button</button>
  </span>

  <Tooltip
    id="my-wrapper"
    openOnClick
    closeEvents={{
      blur: true
    }}
    globalCloseEvents={{}}
  >
    Tooltip content
  </Tooltip>

  <button>Another input to tab to</button>
</>

After clicking the tooltip to open it is not possible to hide it on blur. This is because blur only fires on the button and does not bubble to its parent.

Describe the solution you'd like
I would like to see focusin and focusout events supported in favor/stead of focus and blur. focusin and focusout event types support bubbling so my wrapper component can get those events.

MDN reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Of note, React 17 made the change to prefer focusin and focusout: facebook/react#19606 (comment)

Describe alternatives you've considered
I have some code to dispatch the right event at the wrapper level that gets me around this issue, but it looks pretty nasty:

<span
  data-tooltip-id={id}
  onBlur={() => {
    // ???
    ref.current?.dispatchEvent(new Event('blur'));
  }}
  ref={ref}
>
  {trigger}
</span>

One alternative is to move the data-tooltip-id to button instead, but this could be difficult for a number of reasons. For me specifically, I am trying to be flexible and creating a generic tooltip component that lets a consumer specify whatever button/trigger inside. Ideally I'd like to avoid forcing the consumer to provide an ID through props or using cloneElement to set an ID.

In my copy button scenario, I could set up the mouse events to handle close, but this doesn't solve the problem for keyboard users. On keyboard, if I tab to the button and hit enter, the tooltip will show and I cannot get rid of it by tabbing out.

Lastly, another difficulty is that some inputs could be wrapped by outer components/divs in their internal implementation, so blur wouldn't work for these.

Additional context
I've made a small sandbox to demo my particular issue. One button has the ID on the input and works as expected with blur. Another has the ID on the wrapper and doesn't work.

https://codesandbox.io/p/github/ReactTooltip/react-tooltip/csb-l3c433/draft/dank-snowflake?file=%2Fsrc%2FApp.tsx%3A31%2C23

[gabrieljablonski]

Thanks for the suggestion. We've just recently changed the default events from mouseenter/mouseleave to mouseover/mouseout, which seems like the same distinction for the focus events you mention here.

We'll look into it, but it makes sense to update that as well.

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.