Atlaskit DropdownMenu rendering on top of left of screen rather than below trigger

Atlassian Developer Tools
1

Hi,
I’ve been trying to use the DropdownMenu from React Atlaskit (following the documentation: https://atlassian.design/components/dropdown-menu/examples#appearance). For some reason, the menu keeps rendering on the top left of my screen rather than underneath trigger. Strangely, whenever I set defaultOpen to true, the positioning is fixed, but obviously that’s not an ideal solution. Im using “@atlaskit/dropdown-menu”: “^12.11.1”. Heres the code:

import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";

export default function NavbarProfileDropdown() {
    return (
        <DropdownMenu trigger="Page Actions" shouldRenderToParent>
            <DropdownItemGroup>
                <DropdownItem>Sign in</DropdownItem>
                <DropdownItem>Logout</DropdownItem>
            </DropdownItemGroup>
        </DropdownMenu>
    );
}

EDIT: Turning off strict mode fixed it

2

I ran into this too. It seems that the underlying popper library doesn’t support react-dom 18. Agreed that removing React.StrictMode fixes it. Not a great fix IMHO.