ui: I can't use the combobox

I followed the instructions of the docs, added popover and command and tries to use combobox.

Whenever I click on “Select a framework”, the application fails.

index.mjs:1 Uncaught TypeError: Cannot read properties of undefined (reading 'subscribe')
    at T (webpack-internal:///(app-client)/../../node_modules/cmdk/dist/index.mjs:18:10971)
    at eval (webpack-internal:///(app-client)/../../node_modules/cmdk/dist/index.mjs:18:7415)
    at renderWithHooks (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10649:18)
    at updateForwardRef (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14689:20)
    at beginWork$1 (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17381:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19449:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19498:16)
    at invokeGuardedCallback (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19573:29)
    at beginWork (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25694:7)
    at performUnitOfWork (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24523:12)
    at workLoopSync (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24239:5)
    at renderRootSync (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24204:7)
    at performSyncWorkOnRoot (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23699:20)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9966:13)
    at flushSyncWorkOnAllRoots (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9924:3)
    at processRootScheduleInMicrotask (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10068:3)
    at eval (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10239:7)

About this issue

Original URL
State: open
Created a year ago
Reactions: 6
Comments: 26

Most upvoted comments

have you checked the import?, i faced the similar error because I imported Command from lucide-react

+96

sotatek-vuong on Jul 5, 2023

Combobox stopped working with a same kind of error. Imports are correct.

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Okay, found it. Package cmdk had a breaking change (v1.0.0) Follow the update instructions here: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

+17

tomavanc on Mar 22, 2024

i am unable to select the options in combo box

It appears that changing the CSS selector in the CommandItem className solves the problem: Before: ...data-[disabled]:pointer-events-none data-[disabled]:opacity-50 After: ... data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50

+15

lukdev371 on Mar 26, 2024

i am unable to select the options in combo box

vmewada01 on Mar 26, 2024

unable to select the value in combo box after fixing the bug

{value ? frameworks.find((framework) => framework.value === value)?.label : “Select framework…”} No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? “” : currentValue); setOpen(false); }} > {framework.label} ))}

The CommandItem is disabled because of the [aria-disabled] CSS Selector in the className. As I mentioned earlier, I had the same issue. The disabled state is set to true due to the breaking changes in cmdk version 1.0.0 (https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0)

Change:

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
/>
));

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className
)}
{...props}
/>
));

at least that is, what helped me for this issue

lukdev371 on Mar 26, 2024

To fix error at MultiSelect component, please downgrade version of “cmdk” with the command “npm install cmdk@0.2.1”. Thank you

harsh472000 on Apr 9, 2024

@shadcn , this issue should be closed because the solution as @sotatek-vuong mentioned is importing Command from ui/command instead of lucide-react.

alamenai on Jan 20, 2024

Combobox stopped working with a same kind of error. Imports are correct.
Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
Okay, found it. Package cmdk had a breaking change (v1.0.0) Follow the update instructions here: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

Thanks you saved me.

Alwaz on Apr 1, 2024

unable to select the value in combo box after fixing the bug {value ? frameworks.find((framework) => framework.value === value)?.label : “Select framework…”} No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? “” : currentValue); setOpen(false); }} > {framework.label} ))}

The CommandItem is disabled because of the [aria-disabled] CSS Selector in the className. As I mentioned earlier, I had the same issue. The disabled state is set to true due to the breaking changes in cmdk version 1.0.0 (https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0)

Change:
(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
/>
));
to
(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className
)}
{...props}
/>
));
at least that is, what helped me for this issue

Thank you so such man. I was thinking that, “Maybe, I did something wrong.”

Suman-JS on Apr 7, 2024

https://github.com/shadcn-ui/ui/issues/2980#issuecomment-2029267475

this solution helped me

Muntasir2001 on Apr 4, 2024

@tomavanc Would love to know if you’ve any working example for this? I’ve added CommandList, just want to see a good example using CSS Selectors

tanayvaswani on Mar 26, 2024