[Feature]: Allow more types for modelValue in Select

[wouterlms]

Describe the feature

Currently, the only supported value is a string, which can be limiting. It would be beneficial to expand this functionality to accommodate additional types, akin to how it's implemented in a Combobox.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[kylemilloy]

I did a bit of digging on this. While setting this to any would be the quick fix I think the better long term solution would be to use a generic for the model value. That said, the package is set to support Vue v3.2 and generics were introduced in v3.3.

I suspect the reason it's only string would be because when you get values out of FormData.entries() it casts them all to strings. Either that or the base value for HTML form elements is string.

[wouterlms]

@kylemilloy, casting the type to any wouldn't suffice because the logic for checking if a value is selected is structured like this:

const isSelected = computed(() => rootContext.modelValue?.value === props.value)

However, I managed to "fix" it by wrapping the SelectRoot and SelectItem in custom components where the value is being stringified before passing it.

[wouterlms]

This is my workaround for those who are interested:

SelectItem is quite straightforward

<SelectItem :value="JSON.Stringify(value)">
  <slot />
</SelectItem>

And SelectRoot

<script setup lang="ts" generic="TValue">
import { SelectRoot } from 'radix-vue'
import { computed } from 'vue'

const props = defineProps<{
  modelValue: TValue | undefined
}>()

const emit = defineEmits<{
  'update:modelValue': [value: TValue |  undefined]
}>()

const model = computed<string | undefined>({
  get: () => {
    return JSON.stringify(props.modelValue)
  },
  set: (value) => {
    if (value === undefined) {
      emit('update:modelValue', undefined)
      return
    }

    emit('update:modelValue', JSON.parse(value))
  },
})
</script>

<template>
  <SelectRoot v-model="model" >
    <slot />
  </SelectRoot>
</template>

[kilobyte2007]

@wouterlms This hack mostly works but you'll also want to handle the '' empty string to be able to reset the value.

@zernonia are there any plans to expand the types for this component (and others, like Radio Group, Checkbox Group, Toggle Group)?

I think it's implemented quite greatly in the Combobox component so it would probably make sense to replicate this across other components to make it consistent.

[hi-reeve]

no update on this one?

[zernonia]

As this is highly requested feature, and it involves breaking changes. This will be included in v2

[MrSunshyne]

@wouterlms

This is my workaround for those who are interested:

thank you for this solution 🙏 it worked for me!

[peter-emad99]

is this feature will be one select component only or it will include the other components aslo ( Radio Group, Checkbox , Toggle Group) ??