Using Collection inside a RadioGroup or Checkbox group interferes with tabbing

[steveoh]

Provide a general summary of the issue here

I have a Popover with a Dialog that contains a RadioButtonGroup and CheckboxGroup. I can tab between the two groups, where the check boxes tab individually but I've read that is expected, but as soon as I use the arrow keys in the RadioGroup, tabbing does not exit the checkbox group and the user gets stuck.

🤔 Expected Behavior?

The tabbing should cycle back through including the radiogroup

😯 Current Behavior

Tabbing does not exit the checkbox group and the user gets stuck.

💁 Possible Solution

No response

🔦 Context

I'm testing this within storybook

🖥️ Steps to Reproduce

1. open the popover
2. tab through the 3 items until you are back on the radio group
3. then use the arrow keys to go down on the radios
4. then tab into the checkboxes and you can't leave them

tab-stuck.webm

I'm having trouble making the items in the sandbox look correct but the general idea is that you open the dialog and try to tab around. I'm not sure why the checkboxes and radios aren't showing properly.

https://codesandbox.io/p/sandbox/jovial-elion-3h5jtl?file=%2Fsrc%2FApp.js%3A27%2C35

Version

rac 1.3.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

I don't have the other browsers to test on

What operating system are you using?

mac os 14

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Seems to have something to do with the usage of Collection, here's the working example https://codesandbox.io/p/sandbox/compassionate-butterfly-pk3g9l

This isn't a place where you need to use a Collection, so I'm a little curious to know where this came from?
That said, I wasn't expecting it to be an issue. So we probably have something to at least look into here.

To solve the styles, you just have to put a React Spectrum Provider inside the Dialog because it's portalled to a place where the variables otherwise aren't.

[steveoh]

Thanks. I'm mainly using rac so I'm not that familiar with the spectrum requirements. Thanks for the working example! I added the collection while fooling around and replacing listbox and menu. I figured it could be used anywhere an array of items was rendered.

[steveoh]

That said, I wasn't expecting it to be an issue. So we probably have something to at least look into here.

Should a new issue be created for that?

[snowystinger]

No need, we already have this issue. I'll update the title though.