adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.76k stars 1.09k forks source link

useTooltipTrigger's trigger props do not work when used with useButton #6574

Open kruzliak-juraj opened 3 months ago

kruzliak-juraj commented 3 months ago

Provide a general summary of the issue here

When using the useTooltipTrigger as described in documentation -

let { triggerProps, tooltipProps } = useTooltipTrigger(props, state, ref);

- the triggerProps have onPointerEnter prop that is supposed to be used on the element that should reveal the tooltip.

This works fine when used on a regular <button> element, but when used with useButton on my own Button component, it will fail to open the tooltip. The useButton does not return the onPointerEnter within its buttonProps, it gets ignored and removed.

๐Ÿค” Expected Behavior?

I am able to see two possible behaviors that I would like to see

  1. The buttonProps from useButton should also include any other valid event callbacks that are passed to the useButton
  2. The useTooltipTrigger should return onHover and similar properties that are accepted by useHover so I can use useHover internally within my Button component - (not favorite for many reasons)

Maybe there is a better solution I do not see. Currently, My current solution is to just take { onPointerEnter } = props out and apply it directly

๐Ÿ˜ฏ Current Behavior

Tooltip build with useTooltipTrigger does not work when triggered by Button build with useButton

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://codesandbox.io/p/sandbox/infallible-banach-s5pcyx

Version

"react-aria": "3.33.1"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

snowystinger commented 3 months ago

We use FocusableProvider to implement both the RAC and RSP tooltip components https://codesandbox.io/p/sandbox/vigilant-haze-njn7t8?file=%2Fsrc%2FApp.js%3A12%2C27 I'm not sure why we aren't exporting that in the mono package, I'll bring it up in the team given that we use it for both of our implementations

Feel free to check out our component implementations https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Tooltip.tsx they are all based on our hooks. It may be easier to use the RAC component instead of building your own, it can be hard to wire up all the hooks correctly. https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip