Open dvasyliev opened 7 months ago
The issue was gone when I used useButton
hook from react-aria
instead of Button
component from react-aria-components
. So the problem in the Button
component. I use it as a temporary solution.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content We are working as expected. Please move the button outside of the control.
Even if I move it outside of label
it has the same behaviour
Ah, I see, I suspect that the context is leaking where it shouldn't. You could try clearing the context. See possible context values here https://react-spectrum.adobe.com/react-aria/Select.html#custom-children Should be able to just wrap your DialogTrigger in the same Provider from https://github.com/adobe/react-spectrum/blob/560f05005aa5dbc67f765573a52c5d4665b90f05/packages/react-aria-components/src/Select.tsx#L142 and pass it a blank values.
Let us know if that works
Provide a general summary of the issue here
I need to have a contextual hint with a popover near the label for the select field. When I implement it and click on a hint button, I see 2 popovers opened, one for the hint, the second for select.
π€ Expected Behavior?
π― Current Behavior
When I click on a hint button, I see 2 popovers opened, one for the hint, the second for select
The hint button has the same id as the select button
The hint button has wrong id's in the aria-labeledby and aria-describedby
The same behaviour I noticed for the DatePicker
Also when I use a hint with a DateField, after clicking on a hint button and closing a popover, the focus moves into DateField and I see the first segment active
π Possible Solution
Wrap Button for select and Popover into DialogTrigger, then the issue is gone, but the CSS variable
var(--trigger-width)
was reset for select Popover, and it has a bigger width than the select Button.π¦ Context
I need to have a contextual hint with a popover near the label for the select field.
π₯οΈ Steps to Reproduce
I created the Select component following the example in the documentation of react-aria-components. Then added DialogTrigger with a Button and a Popover inside of the Label component.
Repo: https://github.com/dvasyliev/react-aria-components-popover-issue GitHub page with demo: https://dvasyliev.github.io/react-aria-components-popover-issue/?path=/story/selectwithhint--default
Version
react-aria-components@1.0.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
π§’ Your Company/Team
Doccle
π· Tracking Issue
No response