Skip to content

[Bug]: Dropdown menus show up in the wrong window when using React createPortal #2932

@urbenlegend

Description

@urbenlegend

Describe the bug

My React application creates a new window and then uses React createPortal to render into it. Whenever I try to render any shadcn component that pops up a dropdown menu (Select, Dropdown, Menu, etc.) and I activate the dropdown, it will appear in the main window instead of the new window.
image

Affected component/components

Dropdown, Select, Menu, any that has a dropdown

How to reproduce

  1. Create a component that creates a window
  2. Create an instance of Select or any other component that creates a dropdown
  3. Render the Select into the window with createPortal

I've created an example project demonstrating the behavior in my Github.

Codesandbox/StackBlitz link

https://github.com/urbenlegend/dropdown_test

Logs

No relevant logs

System Info

Happens with both the latest versions of Firefox and Chrome

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingstale?Is this issue stale?

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions