Button inside of Select open few popovers at the same time

[dvasyliev]

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?

• When I click on a hint button, I see only a hint popover opened
• The hint button has a different id from the select button
• The hint button doesn't have aria-labeledby and aria-describedby attributes or have the correct ones (I'm not an expert in accessibility)

😯 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

[email protected]

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

[dvasyliev]

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.

[snowystinger]

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.

[dvasyliev]

Even if I move it outside of label it has the same behaviour

[snowystinger]

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