Replies: 1 comment 1 reply
-
|
It looks like we do the same thing in our S2 ContextualHelp so that it works in our Picker component built on RAC https://react-spectrum.adobe.com/Picker?label=%22Ice+cream+flavor%22&contextualHelp=true#top So I think this is fine. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi all - we want to have the possibility of showing a button with a tooltip in form field labels (similar to what you guys do with spectrum https://react-spectrum.adobe.com/v3/Picker.html#contextual-help )
This been working fine for all form elements so far, except the select.
Having a button inside the label makes it trigger the select dropdown open when clicked.
This issue can be replicated here:
https://stackblitz.com/edit/vitejs-vite-p7zbu8ko?file=src%2FApp.tsx
Forms-SelectField---Select-With-Information-Tooltip-.-Storybook.webm
After debugging the issue and studying your source code, I came to the conclusion that the button was being treated as a select trigger, because the contexts being passed internally to it, and encountered the following prop in the source code, followed by some very helpful comments:
https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/utils.tsx#L158-L171
This being said, settings slots=null to the button that has the tooltip, solves the issue - the button does not trigger the select dropdown, and if we pass events, eg, an onClick event, it handles the event normally.
Demo of that solution:
https://stackblitz.com/edit/vitejs-vite-4vqil1ne?file=src%2FApp.tsx
So my question is: Is this a valid way to solve this scenario? Is it a bug, some misinterpretation from my side, or intended design?
Appreciate any feedback!
Beta Was this translation helpful? Give feedback.
All reactions