Doesn't work inside a Dialog component

[jackiepapers]

Clicking first item has no effect, clicking second item closes dialog. Clicking close button also closes dialog.

[ryanschiang]

This component uses a Popover, so when wrapping it in a Dialog, you need to set modalPopover={true} as per https://github.com/radix-ui/primitives/issues/2121#issuecomment-2227348602

<MultiSelect
    modalPopover={true}
    options={...}
    onValueChange={...}
/>

[wflkaaa]

This component uses a Popover, so when wrapping it in a Dialog, you need to set modalPopover={true} as per radix-ui/primitives#2121 (comment)

<MultiSelect
    modalPopover={true}
    options={...}
    onValueChange={...}
/>

thanks, this solves the issue, but the search and scrollbar of multi-select still not working when inside dialog

[zaidrashid]

This component uses a Popover, so when wrapping it in a Dialog, you need to set modalPopover={true} as per radix-ui/primitives#2121 (comment)

<MultiSelect
    modalPopover={true}
    options={...}
    onValueChange={...}
/>

thanks, this solves the issue, but the search and scrollbar of multi-select still not working when inside dialog

Yes, scrolling and searching now does not work. Is there a work around for this?

[godcong]

If use modalPopover={true}, it will throw aria-hidden error Finally i fixed the problem with pointerEvents First: modalPopover={false}

Second: add style={{ pointerEvents: "auto" }} in popover content

Preview:

Remove the Portal will always fixed, same problem as search. But event can't fix it

[m5khan]

To fix the search I did modal={false} on <Sheet /> or <Dialog/> and also modalPopover={false} on MultiSelect Component

<Dialog
  modal={false}
>
   ...
    <MultiSelect
        modalPopover={false}
        options={...}
        onValueChange={...}
    />
  ...
</Dialog>

[paulotolentino]

Thanks @m5khan !! this approach worked just fine!

[ws-t-jer]

I resolved the scroll with the following code:

  <PopoverContent
    ...
    onWheel={(e) => {
      e.stopPropagation();
    }}
    onTouchMove={(e) => {
      e.stopPropagation();
    }}
  >

https://github.com/radix-ui/primitives/issues/1159

[BaraJabali]

for the search issue use PopoverContentDialog instead of PopoverContent inside the component

[arrizkyhp]

try below approach, it's worked for me https://github.com/shadcn-ui/ui/issues/1511#issuecomment-1784645453