Combobox in a form in a dialog isn't working.

[mastoj]

I have a combobox in a form in a dialog and it isn't working as expected. When I click the button to open the combobox it works as expected, but the input field isn't focused and I can't select any of the items with the mouse or keyboard. If I set the dialog modal property to false it starts working, but I want it to work as a modal.

My form looks like this:

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="grid gap-4 py-4">
              <FormField
                control={form.control}
                name="repositoryName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Repository</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="eg. my-awesome-repo"
                        {...field}
                        disabled={form.formState.isSubmitting}
                      />
                    </FormControl>
                    <FormDescription>
                      This is the name of your repository. It must be unique in
                      the organization.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="resourceGroupName"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Resource group</FormLabel>
                    <Popover
                      open={resourceGroupOpen}
                      onOpenChange={setResourceGroupOpen}
                    >
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            ref={buttonRef}
                            variant="outline"
                            role="combobox"
                            className={cn(
                              "w-full justify-between",
                              !field.value && "text-muted-foreground"
                            )}
                          >
                            {field.value
                              ? resourceGroupOptions.find(
                                  (resourceGroup) =>
                                    resourceGroup.value === field.value
                                )?.label
                              : "Select resource group"}
                            <HiChevronUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent
                        className="min-w-[200px] p-0"
                        style={{ width: buttonRef.current?.clientWidth + "px" }}
                      >
                        <Command>
                          <CommandInput
                            placeholder="Search resource group..."
                            className="h-9"
                          />
                          <CommandEmpty>No resource group found.</CommandEmpty>
                          <CommandGroup>
                            {resourceGroupOptions.map((resourceGroup) => (
                              <CommandItem
                                value={resourceGroup.label}
                                key={resourceGroup.value}
                                onChange={() => {
                                  alert("CHANGED: " + resourceGroup.value);
                                }}
                                onSelect={() => {
                                  form.setValue(
                                    "resourceGroupName",
                                    resourceGroup.value
                                  );
                                  setResourceGroupOpen(false);
                                }}
                              >
                                {resourceGroup.label}
                                <HiCheck
                                  className={cn(
                                    "ml-auto h-4 w-4",
                                    resourceGroup.value === field.value
                                      ? "opacity-100"
                                      : "opacity-0"
                                  )}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <FormDescription>
                      This is the resource group that will be connected to the
                      repo.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <SubmitButton isLoading={form.formState.isSubmitting} />
            </div>
          </form>
        </Form>

That form is then passed as children to my dialog component:

    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        {children}
      </DialogContent>
    </Dialog>

Not sure what is wrong or how to debug it.

[yuconnorl]

Same issue here, and I realized is the pointer-event: none style on body tag cause the problem. Although adding pointer-event: auto back to combobox button manually do help, but when I click on Calendar component button it throw Maximum call stack size exceeded error 😢

[steveafrost]

Same issue here, and I realized is the pointer-event: none style on body tag cause the problem. Although adding pointer-event: auto back to combobox button manually do help, but when I click on Calendar component button it throw Maximum call stack size exceeded error 😢

pointer-event: auto helps with the Calendar component and I don't receive the maximum call stack size exceeded error but the Popover doesn't close.

[steveafrost]

Ah, it's related to the radix issue with different versions of DIsmissableLayer being installed. To resolve, you can pin one version for all components that require it.

See here: https://github.com/radix-ui/primitives/issues/1088#issuecomment-1334006804

[Georgegriff]

None of the workarounds seem to fix keyboard support for me,

overriding to fix this version makes calendar and combobox work with a mouse but keyboard controls are broken. You cannot type into the search box of a combobox either when in a dialog.

This thread looks promising for the keyboard support will try the suggestions of upgrading tomorrow: https://github.com/radix-ui/primitives/issues/2275

Update: Can confirm after following the advice in the above issue which recommended upgrading to latest radix component did work. Keyboard functionality in dialogs is working.

I didn't 100% pin down which specifics ones but I'm running these versions.

    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",

I did not need to do any resolution overrides once i picked up the new versions of things

you could run npm/pnpm outdated to figure out what radix packages you could update, probably worth doing them all if it is some dependency conflict thing that is part of the problem.

[steveafrost]

Confirmed @Georgegriff's suggestion on updating all radix-ui deps does allow removing the override mentioned in the thread I posted previously. Thanks George!

[dev-jteg]

Hey guys, how do you managed to get this working? Mine form is crashing when I'm using the Combobox in a dialog also.

[j-fdion]

@dev-jteg I did like @Georgegriff and @steveafrost recommended, works for me too.

[Rithie]

None of the workarounds seem to fix keyboard support for me,

overriding to fix this version makes calendar and combobox work with a mouse but keyboard controls are broken. You cannot type into the search box of a combobox either when in a dialog.

This thread looks promising for the keyboard support will try the suggestions of upgrading tomorrow: radix-ui/primitives#2275

Update: Can confirm after following the advice in the above issue which recommended upgrading to latest radix component did work. Keyboard functionality in dialogs is working.

I didn't 100% pin down which specifics ones but I'm running these versions.

    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",

I did not need to do any resolution overrides once i picked up the new versions of things

you could run npm/pnpm outdated to figure out what radix packages you could update, probably worth doing them all if it is some dependency conflict thing that is part of the problem.

That's worked for me as well. Thnaks a ton. Peace out!

[DanIrfan23]

Anyone know why my combobox not working in dialog? if i click to open combobox, get blanks white and error

[DanIrfan23]

Hey guys, how do you managed to get this working? Mine form is crashing when I'm using the Combobox in a dialog also.

i got same problem too

[F3lip3]

I'm getting the same problem too...

Here are the packages version I'm using

Hey guys, how do you managed to get this working? Mine form is crashing when I'm using the Combobox in a dialog also.

i got same problem too

[shadcn]

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.

[omesh845]

I copied the official SHADCN COMBO BOX FORM

and error be like:

Unhandled Runtime Error TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Call Stack Function.from A (app-pages-browser)\node_modules.pnpm\[email protected]_@[email protected]_@[email protected][email protected][email protected]\node_modules\cmdk\dist\index.mjs (1:3976)

please Look into this, i'm using

"dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", "@hookform/resolvers": "^3.3.4", "@mui/icons-material": "^5.15.12", "@mui/material": "^5.15.12", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.7", "axios": "^1.6.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", "date-fns": "^3.3.1", "libphonenumber-js": "^1.10.57", "lucide-react": "^0.344.0", "next": "14.1.2", "next-themes": "^0.2.1", "react": "^18", "react-day-picker": "^8.10.0", "react-dom": "^18", "react-hook-form": "^7.51.0", "react-icons": "^5.0.1", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7", "zod": "^3.22.4" }, "devDependencies": { "@hookform/devtools": "^4.3.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.2", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" }

[rfoost]

I am also experiencing this error using the boilerplate code provided by https://ui.shadcn.com/docs/components/combobox

The error occurs on click as it attempts to render the mapped frameworks array.

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

cmdk\dist\index.mjs is throwing a Map.forEach 'anonymous'

I can confirm both Command and Popover examples initialize properly.

[LostArrows27]

@rfoost @omesh845 I have same error and i just compared my current project where im using the combox box too. Then I realize that just dowgrade your "cmdk" package version to "^0.2.0" and everything will work fine

[ashaller2017]

I am also experiencing this error using the boilerplate code provided by https://ui.shadcn.com/docs/components/combobox

The error occurs on click as it attempts to render the mapped frameworks array.

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

cmdk\dist\index.mjs is throwing a Map.forEach 'anonymous'

I can confirm both Command and Popover examples initialize properly.

If you wrap your CommandGroup with a CommandList it will handle the non iterrable error. cmdk release

[nirban07]

I am also experiencing this error using the boilerplate code provided by https://ui.shadcn.com/docs/components/combobox The error occurs on click as it attempts to render the mapped frameworks array. Error: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) cmdk\dist\index.mjs is throwing a Map.forEach 'anonymous' I can confirm both Command and Popover examples initialize properly.

If you wrap your CommandGroup with a CommandList it will handle the non iterrable error. cmdk release

Works for me thanks a ton @ashaller2017

[umutbozdag]

I have the same problem, I can't click any of the options from the combobox. Why the hell the code from the official documentation doesn't work for a 50k+ star library?

Everything is wrong with this.

[wzulfikar]

Got the same issue after adding the component from official document. For me, there were 2 issues:

1. Combobox crashed. To fix this, I wrapped CommandGroup with CommandList, based on @ashaller2017's suggestion.

   

2. Combobox no longer crashing but the options are not clickable. The fix for this is actually mentioned in cmdk release. For my case, I replaced data-[disabled]:... with aria-disabled:....

   Before:

   

   After:

   

[mamlzy]

Got the same issue after adding the component from official document. For me, there were 2 issues:

1. Combobox crashed. To fix this, I wrapped CommandGroup with CommandList, based on @ashaller2017's suggestion.
2. Combobox no longer crashing but the options are not clickable. The fix for this is actually mentioned in cmdk release. For my case, I replaced data-[disabled]:... with aria-disabled:.... Before: After:

You fixed my issue, thank you so much!

[shub-sharma]

@wzulfikar This fix worked perfectly, thanks!

Also, can the official docs be updated to reflect these changes?

[Masood-ul-Rehman]

For me adding this style={{ pointerEvents: "auto" }} worked fine

[capaj]

@shadcn why is this closed? I installed command yesterday and I still had to replace

data-[disabled]:pointer-events-none data-[disabled]:opacity-50

with

aria-disabled:pointer-events-none aria-disabled:opacity-50

to get combobox to work

[braginteractive]

Had an issue with the combobox not working in a sheet/dialog. When I clicked the combobox, it would open but I couldnt use the search feature or click any of the options. It would just close.

Below fixed the issue for me.

I edited the popover.tsx file to remove <PopoverPrimitive.Portal>, but I also edited this file to export PopoverPortal

const Popover = PopoverPrimitive.Root

const PopoverPortal = PopoverPrimitive.Portal

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
	React.ElementRef<typeof PopoverPrimitive.Content>,
	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
	// <PopoverPrimitive.Portal>
	<PopoverPrimitive.Content
		ref={ref}
		align={align}
		sideOffset={sideOffset}
		className={cn(
			'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
			className,
		)}
		{...props}
	/>
	// </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent, PopoverPortal }

Now, I can use the combobox in a dialog/sheet and anytime I need to use the PopoverPortal, I can just wrap <PopoverContent> like the following:

<PopoverPortal>
<PopoverContent className="...">
.....
</PopoverContent>
</PopoverPortal>

[cupid20103]

None of the workarounds seem to fix keyboard support for me, overriding to fix this version makes calendar and combobox work with a mouse but keyboard controls are broken. You cannot type into the search box of a combobox either when in a dialog. This thread looks promising for the keyboard support will try the suggestions of upgrading tomorrow: radix-ui/primitives#2275 Update: Can confirm after following the advice in the above issue which recommended upgrading to latest radix component did work. Keyboard functionality in dialogs is working. I didn't 100% pin down which specifics ones but I'm running these versions.

    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",

I did not need to do any resolution overrides once i picked up the new versions of things you could run npm/pnpm outdated to figure out what radix packages you could update, probably worth doing them all if it is some dependency conflict thing that is part of the problem.

That's worked for me as well. Thnaks a ton. Peace out!

My package.json has same version of those modules but that is still not working 😑