Using selection-popover with RadixUI Dialog component will cause the dialog dismiss incorrectly

[noteverseio]

Bug report

I used selection-popover with radix-ui dialog component together, the selection-popover can work correctly, however when the dialog pops over and clicking any area on the dialog will make the dialog dismissed incorrectly.

Current Behavior

The modal dialog dismissed incorrectly.

See the sandbox demo: https://codesandbox.io/p/sandbox/distracted-worker-2hgg6n?file=%2FApp.jsx%3A21%2C30

Expected behavior

The dialog should be working as normal and should not be dismissed by clicking any area.

Reproducible example

CodeSandbox Link

Additional context

See the codesandbox for more dependency info:

{
  "dependencies": {
    "@radix-ui/colors": "latest",
    "@radix-ui/react-dialog": "latest",
    "@radix-ui/react-icons": "latest",
    "classnames": "latest",
    "clsx": "^1.2.1",
    "react": "latest",
    "react-dom": "latest",
    "selection-popover": "^0.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "latest",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest",
    "vite": "latest"
  },
  "scripts": {
    "start": "vite"
  }
}

Your environment

• OS: MacOS Desktop
• Browser: Chrome

[joaom00]

Thansk for the report!

It's because of the portal part of the dialog that renders outside of Selection.Content, but even without it, it's impossible to interact with the content of the dialog. I'm going to see a way to make selection-popover more compatible with Radix components.

[noteverseio]

@joaom00 Thank you for investigation, I am wondering if selection-popover can work with 3rd-pa dialog if radix-ui dialog is not compatible.

Thansk for the report!

It's because of the portal part of the dialog that renders outside of Selection.Content, but even without it, it's impossible to interact with the content of the dialog. I'm going to see a way to make selection-popover more compatible with Radix components.

[joaom00]

Yeah, I should provide a way to pass custom elements and not close when click inside them

[noteverseio]

Thank you @joaom00, would you please let me know when there is a solution on this issue. ;)

[noteverseio]

Hey @joaom00, I also tried 3rd-party dialog(headlessui dialog) integration, it's the same behaviour, clicking any area on the dialog will dismiss the dialog, selection-popover can work with radix-ui dropdown-menu, select, but not dialog(or popover) related components.

[joaom00]

Hey @ReadabilityOne, just so you know, I just piblish a version with the fix!