[Bug]: Radio Group has disappearing focus

[hrubysi]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.radix-vue.com/components/radio-group#radiogroup

Steps to reproduce

1. Click any options of Radio Group
2. Click outside
3. Tab

Describe the bug

Radio Group can make focus disappear when choice is first selected by mouse and then user uses tab to move around the form.
The focus goes to the wrapper div[role="radiogroup"] instead of some of the options.

Expected behavior

Focus doesn't disappear.
Focus goes directly to some of the options instead of the wrapper div.

Context & Screenshots (if applicable)

No response

[zernonia]

@hrubysi can you provide a better reproduction? the focus looks fine for me

[hrubysimon]

@zernonia Would this help?
https://github.com/user-attachments/assets/84c2a619-a62e-4d5e-ae7d-26f9dae55c61

[zernonia]

Thanks @hrubysimon , but is it happening too on Stackblitz? Might be browser issue. Could you perhaps try other browser?

[hrubysimon]

@zernonia It happens on Brave, Chrome, Edge.
Only browser where it worked for me is Firefox.

I found about it in my project, so it's not just related to radix-vue.com

[zernonia]

Icic.. It's kinda weird.. Can you try it here and see? https://react-spectrum.adobe.com/react-aria/RadioGroup.html#radiogroup

[hrubysimon]

That works fine. Stackblitz is same as radix-vue.com

[zernonia]

Icic. Lastly, can you check https://www.radix-ui.com/primitives/docs/components/radio-group ? The current project is referencing from the main Radix UI repo

[hrubysimon]

That also works well.

[zernonia]

Ok that's weird. I'll dig deeper soon 🤞🏻 Thanks for reporting this

[hrubysimon]

It seems to me, that it might be caused by isClickFocus.value which is probably true after clicking with mouse, then the focus handler is skipped because of it and then it's set to false again.

https://github.com/radix-vue/radix-vue/blob/main/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue#L106

[hrubysimon]

Confirmed by console log. Not sure about the safari bug, so I'm going to leave it up to you.

[zernonia]

Appreciate the insight @hrubysimon !! I think I manage to trace the issue and the same is happening on Radix UI lol