ui icon indicating copy to clipboard operation
ui copied to clipboard

Conditionally select an item in Select component

Open ezechuka opened this issue 1 year ago • 7 comments

When a value is selected and onValueChange runs which causes the page to update the value selected is lost. But I can get that value from the url, but I can't conditionally select that value when Select re-renders. I tried using defaultChecked but its not working. Any help is appreciated!

<Select onValueChange={(value) => {
                const json = JSON.parse(value);
                router.replace(`${json.name}?catId=${json.id}`);
            }}>
                <SelectTrigger className="text-[#828282] rounded-[8px] text-[12px]">
                    <SelectValue placeholder="Select Category" />
                </SelectTrigger>
                <SelectContent>
                    {category.data?.data.map((item) => {
                        return <SelectItem key={item.id}
                            defaultChecked={pageParams.category.toString().toLowerCase() === item.name.toLowerCase()}
                            value={JSON.stringify({ id: item.id.toString(), name: item.name.toLowerCase() })}
                            className="text-[12px]">
                            {item.name}
                        </SelectItem>
                    })}
                </SelectContent>
            </Select>

ezechuka avatar Oct 05 '23 17:10 ezechuka

@ezechuka If it would be possible then can you assign me to this issue I want to resolve this

pragyamishra56 avatar Oct 05 '23 19:10 pragyamishra56

@pragyamishra56 I think only the project maintainers can assign someone to an issue

ezechuka avatar Oct 05 '23 20:10 ezechuka

@pragyamishra56 do you have an idea on how to fix it?

ezechuka avatar Oct 06 '23 10:10 ezechuka

@ezechuka Sir Could you assist me by providing a screenshot to help clarify where the problem is?

pragyamishra56 avatar Oct 06 '23 11:10 pragyamishra56

This is what I'm trying to achieve, I want to conditionally select an item in the Select component to reflect the current category which is in the url. So fashion should be checked or selected since that's what's in the url. WhatsApp Image 2023-10-06 at 12 26 08

ezechuka avatar Oct 06 '23 11:10 ezechuka

It seems like you want that when someone clicks on an element, the link to the website appears at the bottom corner of the screen

Screenshot 2023-10-07 151627

pragyamishra56 avatar Oct 07 '23 10:10 pragyamishra56

This is what I'm trying to achieve, I want to conditionally select an item in the Select component to reflect the current category which is in the url. So fashion should be checked or selected since that's what's in the url. WhatsApp Image 2023-10-06 at 12 26 08

Use defaultValue inside of Select Component

ShaikRehan123 avatar Oct 09 '23 05:10 ShaikRehan123

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.

shadcn avatar Feb 25 '24 23:02 shadcn

I too have this issue where I want to have an item in the select preselected that is fetched from db. I wanted to check if the value matches what is fetched and have it preselected and allow the user to change their selection. Any idea how or is it possible with chadcn select?

HuseyinAA avatar Mar 06 '24 01:03 HuseyinAA