search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
62.74k stars 3.53k forks source link

Popover component requires value property to either start with lowercase or number #411

Open joqim opened 1 year ago

joqim commented 1 year ago

Not sure if this is how values are designed, but I spent a good hour understanding why my Popover wasn't working as expected.

Also not sure if this is a Radix UI issue or Shadcn UI.

eg:

const frameworks = [ { value: "Next.js", label: "Next.js", }, { value: "Sveltekit", label: "SvelteKit", }, { value: "Nuxt.js", label: "Nuxt.js", }, { value: "Remix", label: "Remix", }, { value: "Astro", label: "Astro", }, ]

brooksa-chemtest commented 1 year ago

I've seen the same issue, also happens it the values come from an array

['Item 1' , 'Item 2' , 'Item 3']

Values get converted to lowercase.

shadcn commented 1 year ago

This is from the underlying cmdk component. See the note on values here: https://github.com/pacocoursey/cmdk#command-cmdk-root

Can you share some details on what you're implementing? We can figure out a solution for handling the values.