pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.03k stars 258 forks source link

Can't scroll commandList inside a Dialog using mouse wheel #272

Closed Rrhapsod closed 1 month ago

Rrhapsod commented 1 month ago

Hi, I have a Combobox from shadcn inside a Dialog component. It works perfectly, but I can't scroll the itens list with mouse wheel, I can only scroll by dragging the scroll bar.

Testing the same Combobox outside the shadcn Dialog, I can scroll perfectly with mouse and dragging the scroll bar.

Maybe the problem is with focus?

Structure:


<Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
            <div>
              <DialogHeader>
                <DialogTitle>
                </DialogTitle>
                <DialogDescription>
                </DialogDescription>
              </DialogHeader>
              <div className="my-4 flex w-full flex-col items-center gap-4">
                  <div className="flex flex-col justify-around gap-6 md:flex-row">
                    <div className="flex flex-col items-center gap-2">
                      <Label>Selecione uma Conta Contábil:</Label>
                               <Popover open={open} onOpenChange={setOpen}>
                                <PopoverTrigger asChild>
                                  <Button
                                    variant="sallamos"
                                    role="combobox"
                                    aria-expanded={open}
                                  >
                                  <ChevronsUpDown/>
                                </Button>
                              </PopoverTrigger>
                              <PopoverContent className="w-64 p-0">
                                <Command
                                  className="bg-slate-800 text-white"
                                  value={searchText}
                                  onValueChange={handleSearch}
                                  shouldFilter={true}
                                  filter={(value, search) =>
                                    props.lista
                                      .find((conta) => conta.id === value)
                                      ?.contaContabil.toLowerCase()
                                      .includes(search.toLowerCase())
                                      ? 1
                                      : 0
                                  }
                                >
                                  <CommandInput
                                    placeholder="Buscar..."
                                  />
                                  <CommandList>
                                    <CommandEmpty>Conta Contábil não encontrada.</CommandEmpty>
                                    <CommandGroup className="outline-none focus:border-slate-100 focus:outline-none">
                                      {props.lista.map((conta) => (
                                        <CommandItem
                                          className={`cursor-pointer aria-selected:bg-slate-200 ${
                                            conta.disabled ? "text-gray-500" : "text-slate-50"
                                          }`}
                                          key={conta.id}
                                          value={conta.id}
                                          disabled={conta.disabled}
                                          onSelect={(currentValue) => {
                                            setValue(currentValue === value ? "" : currentValue);
                                            setOpen(false);
                                            props.setContaId(
                                              currentValue === value ? "" : currentValue,
                                            );
                                          }}
                                        >
                                          <Check
                                            className={cn(
                                              "mr-2 h-4 w-4 shrink-0",
                                              value === conta.id ? "opacity-100" : "opacity-0",
                                            )}
                                          />
                                          {`${conta.codArvore} - ${conta.contaContabil}`}
                                        </CommandItem>
                                      ))}
                                    </CommandGroup>
                                  </CommandList>
                                </Command>
                              </PopoverContent>
                            </Popover>
                      <Button variant="secondary">Incluir Conta</Button>
                    </div>
                  </div>
              </div>
              <DialogFooter>
              </DialogFooter>
      </DialogContent>
    </Dialog>
Rrhapsod commented 1 month ago

So, I fixed set modal on Popover to true.


<Popover open={open} onOpenChange={setOpen} modal={true}>
6jonathanaloi6 commented 3 weeks ago

Thanks