fix: add value prop to commandItem to fix search

shadcn-ui · Sep 13, 2023 · decafba · decafba
1 parent c21ecfb
commit decafba
Show file tree

Hide file tree

Showing 22 changed files with 84 additions and 69 deletions.
diff --git a/apps/www/app/examples/cards/components/team-members.tsx b/apps/www/app/examples/cards/components/team-members.tsx
@@ -61,25 +61,25 @@ export function DemoTeamMembers() {
                 <CommandList>
                   <CommandEmpty>No roles found.</CommandEmpty>
                   <CommandGroup>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Viewer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Viewer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view and comment.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Developer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Developer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and edit.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Billing"  className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Billing</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and manage billing.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Owner" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Owner</p>
                       <p className="text-sm text-muted-foreground">
                         Admin-level access to all resources.
@@ -115,25 +115,25 @@ export function DemoTeamMembers() {
                 <CommandList>
                   <CommandEmpty>No roles found.</CommandEmpty>
                   <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Viewer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Viewer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view and comment.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Developer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Developer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and edit.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Billing" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Billing</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and manage billing.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Owner" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Owner</p>
                       <p className="text-sm text-muted-foreground">
                         Admin-level access to all resources.

diff --git a/apps/www/app/examples/dashboard/components/team-switcher.tsx b/apps/www/app/examples/dashboard/components/team-switcher.tsx
@@ -116,6 +116,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                 <CommandGroup key={group.label} heading={group.label}>
                   {group.teams.map((team) => (
                     <CommandItem
+                    value={team.value}
                       key={team.value}
                       onSelect={() => {
                         setSelectedTeam(team)
@@ -150,6 +151,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
               <CommandGroup>
                 <DialogTrigger asChild>
                   <CommandItem
+
                     onSelect={() => {
                       setOpen(false)
                       setShowNewTeamDialog(true)

diff --git a/apps/www/app/examples/playground/components/model-selector.tsx b/apps/www/app/examples/playground/components/model-selector.tsx
@@ -146,6 +146,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
 
   return (
     <CommandItem
+    value={model.name}
       key={model.id}
       onSelect={onSelect}
       ref={ref}

diff --git a/apps/www/app/examples/playground/components/preset-selector.tsx b/apps/www/app/examples/playground/components/preset-selector.tsx
@@ -52,6 +52,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
           <CommandGroup heading="Examples">
             {presets.map((preset) => (
               <CommandItem
+              value={preset.name}
                 key={preset.id}
                 onSelect={() => {
                   setSelectedPreset(preset)
@@ -71,7 +72,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
             ))}
           </CommandGroup>
           <CommandGroup className="pt-0">
-            <CommandItem onSelect={() => router.push("/examples")}>
+            <CommandItem value="More examples" onSelect={() => router.push("/examples")}>
               More examples
             </CommandItem>
           </CommandGroup>

diff --git a/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx
@@ -91,6 +91,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                 return (
                   <CommandItem
                     key={option.value}
+                    value={option.label}
                     onSelect={() => {
                       if (isSelected) {
                         selectedValues.delete(option.value)
@@ -131,6 +132,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                 <CommandSeparator />
                 <CommandGroup>
                   <CommandItem
+                  value="Clear filters"
                     onSelect={() => column?.setFilterValue(undefined)}
                     className="justify-center text-center"
                   >

diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx
@@ -103,15 +103,15 @@ export function CommandMenu({ ...props }: DialogProps) {
           ))}
           <CommandSeparator />
           <CommandGroup heading="Theme">
-            <CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
+            <CommandItem value="Light" onSelect={() => runCommand(() => setTheme("light"))}>
               <SunIcon className="mr-2 h-4 w-4" />
               Light
             </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
+            <CommandItem value="Dark" onSelect={() => runCommand(() => setTheme("dark"))}>
               <MoonIcon className="mr-2 h-4 w-4" />
               Dark
             </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
+            <CommandItem value="System" onSelect={() => runCommand(() => setTheme("system"))}>
               <LaptopIcon className="mr-2 h-4 w-4" />
               System
             </CommandItem>

diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
@@ -85,6 +85,7 @@ export function ComboboxDemo() {
             {frameworks.map((framework) => (
               <CommandItem
                 key={framework.value}
+                value={framework.label}
                 onSelect={(currentValue) => {
                   setValue(currentValue === value ? "" : currentValue)
                   setOpen(false)

diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
@@ -74,15 +74,15 @@ import {
   <CommandList>
     <CommandEmpty>No results found.</CommandEmpty>
     <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
+      <CommandItem value="Calendar">Calendar</CommandItem>
+      <CommandItem value="Search Emoji">Search Emoji</CommandItem>
+      <CommandItem value="Calculator">Calculator</CommandItem>
     </CommandGroup>
     <CommandSeparator />
     <CommandGroup heading="Settings">
-      <CommandItem>Profile</CommandItem>
-      <CommandItem>Billing</CommandItem>
-      <CommandItem>Settings</CommandItem>
+      <CommandItem value="Profile">Profile</CommandItem>
+      <CommandItem value="Billing">Billing</CommandItem>
+      <CommandItem value="Settings">Settings</CommandItem>
     </CommandGroup>
   </CommandList>
 </Command>
@@ -117,9 +117,9 @@ export function CommandMenu() {
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
         <CommandGroup heading="Suggestions">
-          <CommandItem>Calendar</CommandItem>
-          <CommandItem>Search Emoji</CommandItem>
-          <CommandItem>Calculator</CommandItem>
+          <CommandItem value="Calendar">Calendar</CommandItem>
+          <CommandItem value="Search Emoji">Search Emoji</CommandItem>
+          <CommandItem value="Calculator">Calculator</CommandItem>
         </CommandGroup>
       </CommandList>
     </CommandDialog>

diff --git a/apps/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx
@@ -188,6 +188,7 @@ export function CardsChat() {
               <CommandGroup className="p-2">
                 {users.map((user) => (
                   <CommandItem
+                  value={user.email}
                     key={user.email}
                     className="flex items-center px-2"
                     onSelect={() => {

diff --git a/apps/www/registry/default/example/cards/team-members.tsx b/apps/www/registry/default/example/cards/team-members.tsx
@@ -63,25 +63,25 @@ export function CardsTeamMembers() {
                 <CommandList>
                   <CommandEmpty>No roles found.</CommandEmpty>
                   <CommandGroup>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Viewer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Viewer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view and comment.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Developer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Developer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and edit.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Billing" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Billing</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and manage billing.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Owner" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Owner</p>
                       <p className="text-sm text-muted-foreground">
                         Admin-level access to all resources.
@@ -117,25 +117,25 @@ export function CardsTeamMembers() {
                 <CommandList>
                   <CommandEmpty>No roles found.</CommandEmpty>
                   <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Viewer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Viewer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view and comment.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Developer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Developer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and edit.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Billing" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Billing</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and manage billing.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Owner" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Owner</p>
                       <p className="text-sm text-muted-foreground">
                         Admin-level access to all resources.
@@ -173,25 +173,25 @@ export function CardsTeamMembers() {
                 <CommandList>
                   <CommandEmpty>No roles found.</CommandEmpty>
                   <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Viewer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Viewer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view and comment.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem  value="Developer" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Developer</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and edit.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Billing" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Billing</p>
                       <p className="text-sm text-muted-foreground">
                         Can view, comment and manage billing.
                       </p>
                     </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                    <CommandItem value="Owner" className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
                       <p>Owner</p>
                       <p className="text-sm text-muted-foreground">
                         Admin-level access to all resources.

diff --git a/apps/www/registry/default/example/combobox-demo.tsx b/apps/www/registry/default/example/combobox-demo.tsx
@@ -67,6 +67,7 @@ export default function ComboboxDemo() {
           <CommandGroup>
             {frameworks.map((framework) => (
               <CommandItem
+              value={framework.label}
                 key={framework.value}
                 onSelect={(currentValue) => {
                   setValue(currentValue === value ? "" : currentValue)

diff --git a/apps/www/registry/default/example/combobox-dropdown-menu.tsx b/apps/www/registry/default/example/combobox-dropdown-menu.tsx
@@ -83,6 +83,7 @@ export default function ComboboxDropdownMenu() {
                       {labels.map((label) => (
                         <CommandItem
                           key={label}
+                          value={label}
                           onSelect={(value) => {
                             setLabel(value)
                             setOpen(false)

diff --git a/apps/www/registry/default/example/combobox-popover.tsx b/apps/www/registry/default/example/combobox-popover.tsx
@@ -94,6 +94,7 @@ export default function ComboboxPopover() {
               <CommandGroup>
                 {statuses.map((status) => (
                   <CommandItem
+                  value={status.label}
                     key={status.value}
                     onSelect={(value) => {
                       setSelectedStatus(

diff --git a/apps/www/registry/default/example/command-demo.tsx b/apps/www/registry/default/example/command-demo.tsx
@@ -25,32 +25,32 @@ export default function CommandDemo() {
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
         <CommandGroup heading="Suggestions">
-          <CommandItem>
+          <CommandItem value="Calendar">
             <Calendar className="mr-2 h-4 w-4" />
             <span>Calendar</span>
           </CommandItem>
-          <CommandItem>
+          <CommandItem value="Search Emoji">
             <Smile className="mr-2 h-4 w-4" />
             <span>Search Emoji</span>
           </CommandItem>
-          <CommandItem>
+          <CommandItem value="Calculator">
             <Calculator className="mr-2 h-4 w-4" />
             <span>Calculator</span>
           </CommandItem>
         </CommandGroup>
         <CommandSeparator />
         <CommandGroup heading="Settings">
-          <CommandItem>
+          <CommandItem value="Profile">
             <User className="mr-2 h-4 w-4" />
             <span>Profile</span>
             <CommandShortcut>⌘P</CommandShortcut>
           </CommandItem>
-          <CommandItem>
+          <CommandItem value="Billing">
             <CreditCard className="mr-2 h-4 w-4" />
             <span>Billing</span>
             <CommandShortcut>⌘B</CommandShortcut>
           </CommandItem>
-          <CommandItem>
+          <CommandItem value="Settings">
             <Settings className="mr-2 h-4 w-4" />
             <span>Settings</span>
             <CommandShortcut>⌘S</CommandShortcut>

diff --git a/apps/www/registry/default/example/command-dialog.tsx b/apps/www/registry/default/example/command-dialog.tsx
@@ -49,32 +49,32 @@ export default function CommandDialogDemo() {
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
           <CommandGroup heading="Suggestions">
-            <CommandItem>
+            <CommandItem value="Calendar">
               <Calendar className="mr-2 h-4 w-4" />
               <span>Calendar</span>
             </CommandItem>
-            <CommandItem>
+            <CommandItem value="Search Emoji">
               <Smile className="mr-2 h-4 w-4" />
               <span>Search Emoji</span>
             </CommandItem>
-            <CommandItem>
+            <CommandItem value="Calculator">
               <Calculator className="mr-2 h-4 w-4" />
               <span>Calculator</span>
             </CommandItem>
           </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="Settings">
-            <CommandItem>
+            <CommandItem value="Profile">
               <User className="mr-2 h-4 w-4" />
               <span>Profile</span>
               <CommandShortcut>⌘P</CommandShortcut>
             </CommandItem>
-            <CommandItem>
+            <CommandItem value="Billing">
               <CreditCard className="mr-2 h-4 w-4" />
               <span>Billing</span>
               <CommandShortcut>⌘B</CommandShortcut>
             </CommandItem>
-            <CommandItem>
+            <CommandItem value="Settings">
               <Settings className="mr-2 h-4 w-4" />
               <span>Settings</span>
               <CommandShortcut>⌘S</CommandShortcut>

diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx
@@ -188,6 +188,7 @@ export function CardsChat() {
               <CommandGroup className="p-2">
                 {users.map((user) => (
                   <CommandItem
+                  value={user.email}
                     key={user.email}
                     className="flex items-center px-2"
                     onSelect={() => {