Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
maxrchung opened this issue Jun 25, 2024 · 2 comments
Open

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

maxrchung opened this issue Jun 25, 2024 · 2 comments

Comments

@maxrchung
Copy link

maxrchung commented Jun 25, 2024

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
Copy link
Member

gabrieljablonski commented Jun 28, 2024

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.

Copy link

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.

@github-actions github-actions bot added the Stale This has not seen activity in quite some time label Sep 27, 2024
@gabrieljablonski gabrieljablonski removed the Stale This has not seen activity in quite some time label Sep 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants