[Bug]: Select breaks using older radix-vue version

[hendrasan]

Reproduction

https://stackblitz.com/edit/tpwezn

Describe the bug

Commented on #241 as the reference on when the bug might surface.

Here is the stackblitz link to repro:

1. Radix-vue 1.2.3 (breaks) https://stackblitz.com/edit/tpwezn
2. Radix-vue 1.4.0 (works) https://stackblitz.com/edit/tpwezn-zjzxqt

Not sure if this should be reported here or in the radix-vue repo.

So in SelectItem.vue (and maybe other components with similar approach), the problem is in this code

const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
console.log('f', forwardedProps)

If I'm using radix-vue version 1.2.3 to 1.3.2, this breaks as the type of forwardedProps become CustomRefImpl when I console.log it, and the value of it becomes an object like this:

value: {
    "value": "pineapple",
    "disabled": false,
    "asChild": false
}

To get around this, I tested two solutions:

1. Upgrade radix-vue to 1.4.0, then the type of forwardedProps become the expected ComputedRefImpl and the value is the expected string value, which is "pineapple" in the above example. But in radix-vue changelog, it said that v1.3.0 required vue 3.4 (not sure if it's just for the treeshaking feature, I tested radix-vue 1.4.0 in this vue 3.3.8 app and it seemed to still work fine, haven't tested the whole app)

2. Stay in radix-vue 1.2.3 up to 1.3.2, remove the delegatedProps stuff, and directly use the props to pass to v-bind in SelectItem component, not sure if this is a good workaround.

Also, whenever i add a component using npx shadcn-vue@latest add select, it prompts me to upgrade the shadcn-vue version, but IIRC the radix-vue package is installed only during npx shadcn-vue@latest init. So if there are changes that require updates to radix-vue like this one, do I have to manually install the updated radix-vue or can it be automated in some way?

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 50.83 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 6.11.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
    bun: 1.0.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 121.0.6167.160
    Safari: 16.4
  npmPackages:
    @vueuse/core: ^10.1.2 => 10.4.1
    radix-vue: ^1.3.2 => 1.3.2
    vue: ^3.2.47 => 3.3.4

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[sadeghbarati]

@hendrasan Hey there, thanks for explaining

Is there any reason not to update radix-vue and also vue?

---

We use useForwardProps to remove the boolean casting curse (Vue casting undefined boolean props to false)
and delegatedProps to prevent duplicated classes in the cn function

As I mentioned in this PR #241
We need to use computed to make props reactive again after destructuring props

2. Radix-vue 1.4.0 (works)

Related PR in radix-vue unovue/reka-ui#628
Related Vue rfcs vuejs/rfcs#502 (comment)

---

do I have to manually install the updated radix-vue or can it be automated in some way?

Idk it can be done in shadcn-vue CLI to show there is a new version of radix-vue
however, it's better to use tools like https://github.com/antfu/taze to keep your deps fresh

[hendrasan]

Is there any reason not to update radix-vue and also vue?

Haven't checked the 3.4 upgrade guide yet, but just cautious of any breaking changes.

For my issue, I guess I can either update radix-vue to 1.4.0 (and ideally vue 3.4) and use the updated code with useForwardProps or stay in 1.2.3 and just to use props, since SelectItem is/was not using the const { class: className, ...rest } = useAttrs() or destructuring the props, it should be fine to just use props I guess, maybe use the delegatedProps to fix the duplicated class issue.

But for things like this, I wonder if there should be information about this in the docs. Since people (including me) might not update the radix-vue package all the time, but if the npx shadcn-vue@latest add <component> keeps using the latest code (which requires latest radix-vue, then it might be confusing when it works in shadcn-vue website but not on their app.