[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

ScottyMaher · 2024-03-19T04:37:21Z

Describe the bug

In an any Next.js project this is an issue I get simply trying to use the first example combobox as is - copying straight from the docs and without changing anything.

The issue is that the first and last examples do not use a <CommandList> to wrap the <CommandEmpty> and <CommandGroup>. To fix the issue, there must be a CommandList, as the cmdk docs specify.

Here is an excerpt from the first example:

<Command>
  <CommandInput placeholder="Search framework..." className="h-9" />
  <CommandEmpty>No framework found.</CommandEmpty>
  <CommandGroup>
    {frameworks.map((framework) => (
      // some code for CommandItems
    ))}
  </CommandGroup>
</Command>

To fix the issue, add CommandList to the imports and change it to this:

<Command>
  <CommandInput placeholder="Search framework..." className="h-9" />
  <CommandList>
    <CommandEmpty>No framework found.</CommandEmpty>
    <CommandGroup>
      {frameworks.map((framework) => (
        // some code for CommandItems
      ))}
    </CommandGroup>
  </CommandList>
</Command>

The update to cmdk also included "The aria-disabled and aria-selected props will now be set to false, instead of being undefined", which means that the tailwind on the CommandItem also needs to be changed otherwise the mouse events will be disabled on the list:

- "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+ "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50"

Affected component/components

Combobox

How to reproduce

Install a fresh Next.js project
Init shadcn and install combobox dependencies
Copy combobox demo code
Try to use the combobox

Codesandbox/StackBlitz link

No response

Logs

Unhandled Runtime Error
TypeError: Array.from requires an array-like object - not null or undefined
Call Stack
from

[native code]
forEach

[native code]

System Info

Tested on MacOS Sonoma and Windows 10, with Next.js 14.

Before submitting

I've made research efforts and searched the documentation
I've searched for existing issues

The text was updated successfully, but these errors were encountered:

paresiqbal · 2024-03-19T11:01:58Z

But it can't be click now, but still able to use search and press enter.

ScottyMaher · 2024-03-19T11:50:54Z

But it can't be click now, but still able to use search and press enter.

Yeah that's an issue as well. As mentioned in a different thread, the breaking update to cmdk also included "The aria-disabled and aria-selected props will now be set to false, instead of being undefined", which means that the tailwind on the CommandItem needs to be changed to:

- "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+ "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50"

I'll include this in the original post

joonheeu · 2024-03-19T17:31:57Z

I resolved the issue temporarily by downgrading the version.

# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

npm install

treipatru · 2024-03-19T18:53:59Z

I resolved the issue temporarily by downgrading the version.
- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

Thanks for the suggestion. I just tried with v 0.2.1 and that works too.

dsyx · 2024-03-20T14:20:43Z

cmdk v1.0.0 has a breaking update:

Command.List is now required (CommandList in shadcn)

Rendering the Command.List part (CommandList if using shadcn) is now mandatory. Otherwise, you should expect to see an error like this:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Currently, the dependency of the Combobox example is: "cmdk": "^0.2.0".

It is not recommended to use CommandList to contain CommandItem, which will disable pointer events of CommandItem.

jercomio · 2024-03-22T13:47:53Z

Hello, I had the same problem with Next.js 14 and I found the following solution:

CommandList is required (@dsyx )
In command.tsx and for CommandItem, replace in className:
data-[disabled]:pointer-events-none by data-[disabled]:pointer-events-auto

And now, the Combobox component works.

isneverdead · 2024-03-24T22:18:12Z

i have solution here, i'm using "cmdk": "^0.2.0"but because it will disable the pointer events of commandItem, i'm adding state to popover and change the state when user click on the initial button or the commandGroup. i know maybe it not the best but at least it can work again until this bug get fixed.

const Page = () => {
........

  const [popover1, setPopover1] = useState(false);

........
<Popover open={popover1}>  // <------------ here
    <PopoverTrigger asChild>
      <FormControl>
        <Button
          onClick={() => setPopover1(!popover1)} // <------------ here
          variant='outline'
          role='combobox'
          className={cn(
            'w-[200px] justify-between',
            !field.value && 'text-muted-foreground'
          )}
        >
          {field.value
            ? vendorList.find(
                (vndr) => vndr.value === field.value
              )?.label
            : 'Select Vendor'}
          <CaretSortIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
        </Button>
      </FormControl>
    </PopoverTrigger>
    <PopoverContent className='w-[200px] p-0'>
      <Command>
        <CommandInput
          placeholder='Search Vendor...'
          className='h-9'
        />
        <CommandEmpty>No framework found.</CommandEmpty>
        <CommandGroup onClick={() => setPopover1(!popover1)}>  // <------------ here
          {vendorList.map((vendorItem) => (
            <CommandItem
              value={vendorItem.label}
              key={vendorItem.value}
              onSelect={() => {
                form.setValue('vendorId', vendorItem.value);
              }}
            >
              {vendorItem.label}
              <CheckIcon
                className={cn(
                  'ml-auto h-4 w-4',
                  vendorItem.value === field.value
                    ? 'opacity-100'
                    : 'opacity-0'
                )}
              />
            </CommandItem>
          ))}
        </CommandGroup>
      </Command>
    </PopoverContent>
  </Popover>

maik-emanoel · 2024-03-25T16:29:50Z

I resolved the issue temporarily by downgrading the version.
# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",
npm install

This worked perfectly to me, thanks.

d1d4r · 2024-04-02T23:13:58Z

I resolved the issue temporarily by downgrading the version.
# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",
npm install

it work perfectly

aminulidev · 2024-04-02T23:28:05Z

data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50

Its working for me. thanks

treipatru · 2024-04-04T17:05:36Z

While downgrading the version of cmdk works well, there is a drawback: the keywords prop does not exist in 0.2.1 and below.
So if you need to filter by multiple values, the original workaround (1st post) works just fine with the latest cmdk version. Thanks everyone for the shared info 🙏

mk48 · 2024-04-23T17:57:45Z

Hello, I had the same problem with Next.js 14 and I found the following solution:
1. `CommandList` is required (@dsyx )

2. In `command.tsx` and for `CommandItem`, replace in `className`:
   `data-[disabled]:pointer-events-none` by `data-[disabled]:pointer-events-auto`
And now, the Combobox component works.

Thanks, It's fixed the issue

harryzcy · 2024-04-26T21:14:59Z

Why is this closed as completed? Is #3268 the right PR that's working on this?

ScottyMaher · 2024-04-27T09:44:38Z

Why is this closed as completed? Is #3268 the right PR that's working on this?

Oh, I just closed it because it has an answer on how to fix it now. Was able to update the OP with the answers as people commented them. Similar to how I might close my issue on StackOverflow once it's been successfully answered. Based on your comment I'm guessing it's supposed to stay open until the fix exists in the actual source code? This is the first github issue I've ever posted.

michidk · 2024-04-27T12:43:31Z

Yeah, I think this bug report should stay open until the bug is fixed (which is it not) and the code works as intended.

code-PA-32 · 2024-04-27T15:52:47Z

None of the fixes—not data-[disabled='true'] or a CMDK downgrade—work.
😃

lohrm-stabl · 2024-05-03T08:15:01Z

@ScottyMaher can you please reopen this?

rppala3 · 2024-05-15T16:26:10Z

This worked for me as well.

Hello, I had the same problem with Next.js 14 and I found the following solution:
1. `CommandList` is required (@dsyx )

This is not needed.

2. In `command.tsx` and for `CommandItem`, replace in `className`:
   `data-[disabled]:pointer-events-none` by `data-[disabled]:pointer-events-auto`

At this point this is not a bug anymore, but it's a misalignment with the documentation.
See combobox page. All the examples contain legacy code.
That is not true in the command page. The examples are good.

TobX12 · 2024-06-03T14:57:06Z

Only the downgrade fix worked for me, not the one with

In command.tsx and for CommandItem, replace in className:
data-[disabled]:pointer-events-none by data-[disabled]:pointer-events-auto

As I am not using the combox, only the "CommandInput"

      <CommandInput
        placeholder="Search for a name"
        value={searchText}
        onValueChange={(value) => setSearchText(value)} />
      </Command>

Event this leads to the Error

TypeError: Array.from requires an array-like object - not null or undefined

Any ideas how to fix this besides downgrading?

This downgrade is aimed to solve the error: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) arousing from the using popover component of shadcn/ui. For details, see github issues here: shadcn-ui/ui#3051.

ScottyMaher · 2024-08-07T00:00:21Z

Fixed in #2945

ScottyMaher added the bug Something isn't working label Mar 19, 2024

ScottyMaher mentioned this issue Mar 19, 2024

[Bug]: COMBOBOX - Uncaught TypeError: undefined is not iterable #3047

Open

2 tasks

sunnybak mentioned this issue Mar 21, 2024

[Bug]: items is indefined in ComboBox component #3079

Closed

2 tasks

michidk mentioned this issue Mar 26, 2024

fix(deps): update dependency cmdk to v1 michidk/MVG-Infoscreen#27

Open

1 task

ObjectJosh mentioned this issue Mar 29, 2024

fix: update cmdk breaking changes #3268

Closed

ScottyMaher closed this as completed Mar 31, 2024

ScottyMaher reopened this Mar 31, 2024

ScottyMaher closed this as completed Apr 26, 2024

ScottyMaher reopened this May 15, 2024

zammitjohn mentioned this issue Jun 16, 2024

Unhandled Runtime Error with Autofill on Multi-Selector hsuanyi-chou/shadcn-ui-expansions#89

Closed

ScottyMaher closed this as completed Aug 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

ScottyMaher commented Mar 19, 2024 •

edited

Loading

paresiqbal commented Mar 19, 2024

ScottyMaher commented Mar 19, 2024 •

edited

Loading

joonheeu commented Mar 19, 2024

treipatru commented Mar 19, 2024

dsyx commented Mar 20, 2024

`Command.List` is now required (`CommandList` in shadcn)

jercomio commented Mar 22, 2024

isneverdead commented Mar 24, 2024

maik-emanoel commented Mar 25, 2024

d1d4r commented Apr 2, 2024

aminulidev commented Apr 2, 2024

treipatru commented Apr 4, 2024

mk48 commented Apr 23, 2024

harryzcy commented Apr 26, 2024

ScottyMaher commented Apr 27, 2024 •

edited

Loading

michidk commented Apr 27, 2024

code-PA-32 commented Apr 27, 2024

lohrm-stabl commented May 3, 2024

rppala3 commented May 15, 2024

TobX12 commented Jun 3, 2024

ScottyMaher commented Aug 7, 2024

[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

Comments

ScottyMaher commented Mar 19, 2024 • edited Loading

Describe the bug

Affected component/components

How to reproduce

Codesandbox/StackBlitz link

Logs

System Info

Before submitting

paresiqbal commented Mar 19, 2024

ScottyMaher commented Mar 19, 2024 • edited Loading

joonheeu commented Mar 19, 2024

treipatru commented Mar 19, 2024

dsyx commented Mar 20, 2024

Command.List is now required (CommandList in shadcn)

jercomio commented Mar 22, 2024

isneverdead commented Mar 24, 2024

maik-emanoel commented Mar 25, 2024

d1d4r commented Apr 2, 2024

aminulidev commented Apr 2, 2024

treipatru commented Apr 4, 2024

mk48 commented Apr 23, 2024

harryzcy commented Apr 26, 2024

ScottyMaher commented Apr 27, 2024 • edited Loading

michidk commented Apr 27, 2024

code-PA-32 commented Apr 27, 2024

lohrm-stabl commented May 3, 2024

rppala3 commented May 15, 2024

TobX12 commented Jun 3, 2024

ScottyMaher commented Aug 7, 2024

ScottyMaher commented Mar 19, 2024 •

edited

Loading

ScottyMaher commented Mar 19, 2024 •

edited

Loading

`Command.List` is now required (`CommandList` in shadcn)

ScottyMaher commented Apr 27, 2024 •

edited

Loading