ui: Default value not showing the correct selected value

I have a button with action to set a sorting on select input. On that button i change the value on useState from latest -> price-low-high.

When the button clicked the value inside render-value class changed. but the default value for the select not changed.

const [sort, setSort] = useState<string>('latest')

<div className="flex items-center w-full md:w-auto">
  <div className="render-value">{sort}</div>
  <button onClick={()=> setSort('price-low-high')}>CHANGE SORT VALUE<button>

  <Label htmlFor="sorting" className="mr-2 text-gray-500 hidden md:block">Sorting {sort}</Label>
  <Select onValueChange={value=> selectSort(value)}
    defaultValue={sort}>
    <SelectTrigger className="w-full md:w-[200px]">
      <SelectValue placeholder="Select Sorting" />
    </SelectTrigger>
    <SelectContent id="sorting">
      <SelectItem value="latest">Latest Product {sort}</SelectItem>
      <SelectItem value={'price-low-high'}>Price: Low - High</SelectItem>
      <SelectItem value={'price-high-low'}>Price: High - Low</SelectItem>
    </SelectContent>
  </Select>
</div>

About this issue

Original URL
State: open
Created 10 months ago
Reactions: 13
Comments: 16

Most upvoted comments

@yousihy @codingwithashu I hope you are aware of the fact that defaultValue should be used only when you do not need to control the state of the select. You might need to use value instead. See This

+13

hardikchopra242 on Sep 20, 2023

@yousihy , have you resolved this?

For my case, the issue was that I needed to strictly specify that the value is a string although the type was a string. This applies to ALL shadcn controls by the way.

So, I had to convert the string to a string

value={data.id.toString()}

So, the SelectContent would look like this:

<SelectContent>
     {propType.map((data)=>(
      <SelectItem key={data.id} value={data.id.toString()}>{data.name}</SelectItem>
    ))}
</SelectContent>

+12

yousihy on Sep 22, 2023

solved 💯 😉 👍 🥇

Actually, due to the fact that shadcn uses radix in itself and when you are importing the select component, it is probably wrongly imported from radix and you just need to import it from the select component related to shadcn. This was the problem with my code and I realized it after a few days

import { SelectItem, SelectValue } from “@radix-ui/react-select”; //wrong import

import {SelectItem, SelectValue } from “@/components/ui/select”; //correct import

mammad-arvin on Jan 21, 2024

@yousihy @codingwithashu I hope you are aware of the fact that defaultValue should be used only when you do not need to control the state of the select. You might need to use value instead. See This

This did not work for me or it didn’t have any effect on my problem. My controls are working fine with value only. My issue was that I needed to ensure that I am passing a string to the value property of the SelectItem even though the type of that value is actually a string. See my comment above

yousihy on Sep 22, 2023

I was also having trouble getting this to work. But @hardikchopra242 nailed it for me. The example of usage in a form in the docs leads to this mistake (defaultValue instead of value).

lucas-mirror on Sep 20, 2023

@yousihy Thanks!

data.id.toString()

this saved me to waste much more time on this

Yolosopher2 on Sep 22, 2023

@yousihy , have you resolved this?

codingwithashu on Sep 18, 2023

As the Radix docs state: If you need more flexibility, you can control the component using value/onValueChange props and passing children to SelectValue.

This fixed my issue.

amuelrath on Feb 6, 2024

As the Radix docs state: If you need more flexibility, you can control the component using value/onValueChange props and passing children to SelectValue.

bennoinbeta on Dec 16, 2023

@yousihy @codingwithashu I hope you are aware of the fact that defaultValue should be used only when you do not need to control the state of the select. You might need to use value instead. See This

It works 👍

For set the defaulValues for the form use:

const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: "your values" ,
  });

webdiego on Oct 7, 2023