radix-vue icon indicating copy to clipboard operation
radix-vue copied to clipboard

[Bug]: Web component radio group arrow key selection not working as intended

Open cain opened this issue 8 months ago • 0 comments

Environment

Node version: v18.20.3
Radix Vue version: ^1.8.3
Vue version: "^3.4.27"

Client OS: Macos 14.4.1
Browser: Chromium Engine Version 126.0.6478.57

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-shxgju?file=src%2Fcomponents%2FRadioGroup.vue

Steps to reproduce

see reproduction link, and try the up and down arrow once selecting an item.

Describe the bug

The selection seems to occur multiple times based on the number of radio inputs. Inspecting the code it appears to be something todo with the ref https://github.com/radix-vue/radix-vue/blob/main/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue#L32

Is working fine when not using web components

Expected behavior

Radio group should be selecing up and down based on the arrow keys

Context & Screenshots (if applicable)

https://github.com/radix-vue/radix-vue/assets/15246256/f4a8f402-9999-4982-bdea-9736eb5b9e0c

https://github.com/radix-vue/radix-vue/assets/15246256/c412390a-7cf2-4b2c-b52c-97494742f3fc

Im assuming its something to do with the context of being inside a web component? Just guessing here, Im not to familiar with this project, but love and appreciate all the work that has been done.

I've only tested radio group component, im assuming others are breaking as well

cain avatar Jun 17 '24 08:06 cain