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

Can't use Tooltip with Tab #6800

Open
ArrayKnight opened this issue Jul 30, 2024 · 6 comments · May be fixed by #7289
Open

Can't use Tooltip with Tab #6800

ArrayKnight opened this issue Jul 30, 2024 · 6 comments · May be fixed by #7289
Assignees
Labels
enhancement New feature or request

Comments

@ArrayKnight
Copy link

ArrayKnight commented Jul 30, 2024

Provide a general summary of the issue here

We have a design that calls for a series of Tabs with icons as their content, with a Tooltip for each to label them

🤔 Expected Behavior?

To be able to use Tooltip to augment Tab label

😯 Current Behavior

See the steps to reproduce as reference

  1. Wrapping TooltipTrigger around Tab never triggers the Tooltip
  2. Wrapping TooltipTrigger around a plain button within the Tab never triggers the Tooltip
  3. Wrapping TooltipTrigger around a RAC Button triggers the Tooltip, but breaks the ability to switch to the Tab/TabPanel
  4. Creating a custom label, following this example: https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html#example never triggers the Tooltip

💁 Possible Solution

No response

🔦 Context

The design is necessary due to limited space constraints

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/naughty-pascal-sgm27q

Version

"react-aria": "3.33.1", "react-aria-components": "1.2.1", "react-stately": "3.31.1",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@ArrayKnight
Copy link
Author

ArrayKnight commented Jul 30, 2024

Looked deeper into the hooks and found that usePress stops propagation by default. Was able to workaround my issue by implementing onPressStart={(event) => { event.continuePropagation(); } on the Button within a Tab:
https://codesandbox.io/p/sandbox/elegant-shamir-xc2yl8

But it doesn't feel like it should be this hard and it feels pretty weird to have to implement a Button inside of a Tab to get this to work. It feels like the Tab should support the functionality directly

@ArrayKnight ArrayKnight changed the title Can't use Tooltip within Tab Can't use Tooltip with Tab Jul 31, 2024
@snowystinger
Copy link
Member

Of note, a Button inside a Tab is actually not valid ARIA.

I haven't had the time to check, but were you able to determine why the TooltipTrigger on a Tab doesn't work? is it because we haven't exposed the hover props yet? #6742 or is it something else?

@ArrayKnight
Copy link
Author

I haven't had a chance to track down what the issue is. It's possible the above hover fix would help, but it doesn't appear to be released, so I can't test against it

@ArrayKnight
Copy link
Author

I was able to verify in your Storybook that the addition of the hover events did not fix wrapping a Tab with a TooltipTrigger

@ArrayKnight
Copy link
Author

ArrayKnight commented Jul 31, 2024

So, I think this stems from the Tab never consuming the FocusableContext

function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {

None of the hooks call useFocusableContext or useFocusable, only ever useFocusRing

@snowystinger snowystinger added enhancement New feature or request and removed needs investigation labels Aug 1, 2024
@ArrayKnight
Copy link
Author

It appears that simply implementing useFocusable in Tab is not sufficient. I believe that due to complications introduced by the Collection pattern (implemented by Tabs), the trigger ref is never being set correctly onto the Tab, and the FocusableContext doesn't successfully penetrate into the Tab rendering scope.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: 🏗 In Progress
Development

Successfully merging a pull request may close this issue.

2 participants