Can't selectItem value from Select component with a map ?

[la-ruee-vers-le-bois]

Hi,

I had the following code:

[...]
<Label htmlFor='size' className='text-right'>
                Taille du bois
              </Label>
              <Select>
                <SelectTrigger className='w-[180px]'>
                  <SelectValue placeholder='Choisir une taille' />
                </SelectTrigger>
                <SelectContent>
                  {cutSizes &&
                    cutSizes.map((cutSize) => (
                      <SelectItem
                        key={cutSize.id}
                        value={cutSize.size}>
                        {cutSize.size} {cutSize.unity}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>

              <Select>
                <SelectTrigger className='w-[180px]'>
                  <SelectValue placeholder='Select a fruit' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value='apple'>Apple</SelectItem>
                  <SelectItem value='banana'>Banana</SelectItem>
                  <SelectItem value='blueberry'>Blueberry</SelectItem>
                  <SelectItem value='grapes'>Grapes</SelectItem>
                  <SelectItem value='pineapple'>Pineapple</SelectItem>
                </SelectContent>
              </Select>

And I get this "strange" comportement:

screen-capture (2).webm

Maybe I'm missing something ?

Thx for your help

[dan5py]

Hi @la-ruee-vers-le-bois, I tested the code you provided by I don't get the same behavior. Can you create a independent page (or a new app) and add only this component (the whole dialog) to see if the error persists?

[la-ruee-vers-le-bois]

HI and thx for your help :)

Add .toString() solved the problem:

<SelectItem
  key={cutSize.id.toString()}
  value={cutSize.size.toString()}>
  {cutSize.size} {cutSize.unity}
</SelectItem>

My cutSizes array:

[
  {
    id: 1,
    created_at: '2023-07-03T06:22:12.666939+00:00',
    size: 25,
    unity: 'cm'
  },
  {
    id: 2,
    created_at: '2023-07-03T06:22:21.258911+00:00',
    size: 33,
    unity: 'cm'
  },
  {
    id: 3,
    created_at: '2023-07-03T06:22:50.065448+00:00',
    size: 50,
    unity: 'cm'
  }
]

[9r1nc3w1ll]

I had the same issue for a while. I just found a fix. The trick here is that the select values "are case sensitive". So value1 != VALUE1. You need to make sure that the value in the map, field.value and value in the onValueChange callback are equal ===.

You can achieve this by converting them to string and unifying the case (if the list source doesn't). See screenshot:

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.