Popover scrolling issue with mouse wheel

[if1eight0sty]

I need to make a component which functions as Combobox. The command component has a fixed height. If the command items exceed the height the command components allowing scrolling in y direction.
I have used a popover inside a dialog component. Since the popover is inside the dialog I am not being able to scroll the command items with my mouse wheel, but when it allows scrolling with the scrollbar on the side. I have found that popover inside the dialog restricting the wheel scroll. how can i solve it? any suggestions??
here is my code and my ui sample:

code

ui

[nicolasherediaerro]

For popovers that are inside a dialog component, you must set the popover's modal prop to true.

<Popover modal={true}>
  <PopoverTrigger asChild>
    <Button
      variant="outline"
      role="combobox"
      className={cn(
        "w-full justify-between",
        !field.value && "text-muted-foreground",
      )}
    >
      {field.value
        ? users.find(
            (user) => user.id === field.value,
          )?.name
        : "Select User}
      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
    </Button>

[aldoBangun]

It's working. but how?

[nicolasherediaerro]

When implementing a Popover within a Dialog component, it's crucial to set the modal prop to true on the Popover. This configuration is essential for maintaining proper focus management, accessibility, and user experience in nested modal-like components. Let's break down why this is so important:

1. Focus Management:
   Setting modal={true} ensures that focus remains trapped within the Popover when it's open. This is like creating a focused conversation space within an already private room. It prevents users from accidentally interacting with elements outside the Popover, maintaining the context and flow of interaction.

2. Accessibility:
   For users relying on screen readers or other assistive technologies, a modal Popover creates a clear hierarchy of interactive elements. It signals that the Popover content is now the primary area of focus, even within the context of the Dialog. This maintains a consistent and predictable experience, crucial for navigating complex interfaces.

3. Event Handling:
   Modal Popovers prevent event propagation to underlying elements. This is particularly important when your Popover contains interactive elements like form inputs or buttons. It ensures that user actions within the Popover don't unintentionally trigger behaviors in the parent Dialog or the main application behind it.

4. User Experience Consistency:
   Users expect a certain behavior when interacting with nested modal-like components. By making the Popover modal, you're meeting these expectations, providing a seamless and intuitive experience. It's about maintaining the user's mental model of how the interface should behave.

5. Handling Layout Challenges:
   In cases where the Popover or its contents (like a combobox) have fixed heights, setting modal={true} can help mitigate accessibility issues that might arise from content extending beyond visible areas. It ensures that the Popover takes precedence in the interaction order, regardless of its visual constraints.

6. Keyboard Navigation:
   For keyboard users, a modal Popover creates a clear navigation path. It ensures that keyboard focus cycles through the Popover's content completely before returning to the parent Dialog. This structured navigation is essential for users who rely on keyboards for interface interaction.

7. Proper Layering:
   While not directly controlled by the modal prop, modal behavior often involves correct z-index stacking. Ensuring the Popover is modal helps maintain the proper visual and interactive layering within your application, which is crucial for complex, nested interfaces.

By implementing modal={true} on your Popover within a Dialog, you're essentially creating a new layer of modal interaction. This approach ensures that the Popover behaves as expected within the already-modal context of the Dialog, maintaining accessibility standards and providing a consistent, professional user experience.

For more detailed implementation guidelines and best practices, I recommend referring to the Radix UI Popover documentation.

[nicolasherediaerro]

Even with all these considerations, it seems the root of the issue lies in the way the Shadcn dialog is structured. The use of fixed positioning in Shadcn’s dialog and alert-dialog components leads to visual problems like blurred borders, especially when background blur effects are applied.

Since we are using a custom-built dialog component, we had to make modifications to avoid these issues. Our component does not rely on fixed positioning. Instead, it uses flexbox centering to achieve a similar effect. This allows us to avoid the blurred borders and maintain a clean, consistent visual experience across different devices and screen sizes.

By integrating this approach into your codebase, you can prevent the issue of not being able to scroll in your Popover Dialog component, ensuring a smoother user interaction.

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/5 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay className="flex items-center justify-center">
      <DialogPrimitive.Content
        ref={ref}
        className={cn(
          "relative z-50 mx-2 grid w-full rounded-xl border border-border bg-background duration-200 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",
          className,
        )}
        {...props}
      >
        {children}
      </DialogPrimitive.Content>
    </DialogOverlay>
  </DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;

Here's an example component:

"use client";

import * as React from "react";
import { cn } from "@barracaerro/ui";
import { Button } from "@barracaerro/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@barracaerro/ui/command";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@barracaerro/ui/dialog";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@barracaerro/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
  {
    value: "react",
    label: "React",
  },
  {
    value: "vue",
    label: "Vue.js",
  },
  {
    value: "angular",
    label: "Angular",
  },
  {
    value: "solidjs",
    label: "SolidJS",
  },
  {
    value: "ember",
    label: "Ember.js",
  },
  {
    value: "preact",
    label: "Preact",
  },
];

export function DialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("");
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Dialog with Modal Popover</DialogTitle>
        </DialogHeader>
        <div className="p-4">
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={open}
                className="w-full justify-between"
              >
                {value
                  ? frameworks.find((framework) => framework.value === value)
                      ?.label
                  : "Select framework..."}
                <ChevronsUpDown className="size-4 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent fullWidth>
              <Command>
                <CommandInput
                  placeholder="Search framework..."
                  className="h-9"
                />
                <CommandList>
                  <CommandEmpty>No framework found.</CommandEmpty>
                  <CommandGroup>
                    {frameworks.map((framework) => (
                      <CommandItem
                        key={framework.value}
                        value={framework.value}
                        onSelect={(currentValue) => {
                          setValue(currentValue === value ? "" : currentValue);
                          setOpen(false);
                        }}
                      >
                        {framework.label}
                        <Check
                          className={cn(
                            "ml-auto",
                            value === framework.value
                              ? "opacity-100"
                              : "opacity-0",
                          )}
                        />
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
        </div>
      </DialogContent>
    </Dialog>
  );
}

Video.Project.mp4

Note that we're not using the modal prop at popover

[instituto-allamo]

My scroll worked adding

onWheel={(e) => e.stopPropagation()}

inside the component DialogPrimitive.Content

[sgfort]

thanks

[if1eight0sty]

it works on my new project, i have created few weeks ago. but in my old project its still not working.
i have found that, its not only disabling the scroll, but it is disabling all the mouse events.

for my project i have create a multiselect. so i used the Popover. i need to select this popover inside a Dialog (which is a form).
i have exact codes for both the projects, the new project allows to interact with PopoverContent passing modal={true} to Popover.
but its not working in the old project.

old project

<Popover open={open} onOpenChange={setOpen} modal={true}>
    <PopoverTrigger asChild>
        <button
            type="button">
            {selectedOption}
        </button>
    </PopoverTrigger>
    <PopoverContent className="w-full min-w-[var(--radix-popper-anchor-width)] max-w-[var(--radix-popper-content-width)]">
        <div className="grid gap-4">
            <div className="grid gap-2">
                <div className="grid items-center grid-cols-3 gap-4">
                    <Label htmlFor="width">Width</Label>
                    <Input
                        id="width"
                        defaultValue="100%"
                        className="h-8 col-span-2"
                    />
                </div>
                <div className="grid items-center grid-cols-3 gap-4">
                    <Label htmlFor="maxHeight">Max. height</Label>
                    <Input
                        id="maxHeight"
                        defaultValue="none"
                        className="h-8 col-span-2"
                    />
                </div>
            </div>
        </div>
    </PopoverContent>
</Popover >

new project

<div className="flex flex-col w-full space-y-2">
    <Label
        htmlFor={label}
        {label}
        {required && (
            <span className="pl-1 text-rose-500">*</span>
        )}
    </Label>
    <Popover open={open} onOpenChange={setOpen} modal={true}>
        <PopoverTrigger asChild>
            <Button
                disabled={disabled}>
                {selectedData}
            </Button>
        </PopoverTrigger>
        <PopoverContent
            className="w-full min-w-[var(--radix-popper-anchor-width)]  max-w-[var(--radix-popper-content-width)]"
            align="start"
        >
            <Command>
                <CommandList
                    className={cn(
                        "custom-scrollbar max-h-[15em] rounded-[inherit] mt-2",
                        allowSearch ? "mt-2" : "mt-0"
                    )}
                >
                    <CommandGroup>
                        {Array.isArray(filteredData) &&
                            filteredData.length > 0 && (
                            filteredData.map((item) => (
                                <CommandItem
                                    key={`${item.value}`}
                                    onSelect={() =>
                                        handleOnSelect(item)
                                    }>
                                    <p>{item.label}</p>
                                </CommandItem>
                            ))
                        ) }
                    </CommandGroup>
                </CommandList>
            </Command>
        </PopoverContent>
    </Popover>
</div>

in the old project, i am not being able to focus in the input, but in the new project, i can focus in the input and select the options as well.

i have upgrade the libraries in the old projects too, yet its not working in the old project

1. "@radix-ui/react-popover": "^1.1.6",
2. "@radix-ui/react-dialog": "^1.1.6",

these are the packages currently i am running in my projects. can any one tell me whats i am doing wrong? or any feedback is appreciated.