Atlaskit Trigger Button seems to fire twice on one click

Atlassian Ecosystem Design
1

I use a dropdown component:

        <DropdownMenu
            isLoading={isLoading}
            trigger="Chapters"
            triggerType="button"
            position="bottom right"
            onOpenChange={(event) => console.log(11.1, { event })}
        >
            <DropdownItemGroup>
                {chapterItems.map((item, i) => (
                    <DropdownItem key={i}>{item.label}</DropdownItem>
                ))}
            </DropdownItemGroup>
        </DropdownMenu>

If I click on the button when the menu is closed, there is one onOpenChange event fired. But when it is already open and I click on the trigger button to close it, then the event is fired twice resulting in the menu staying open.

Am I missing something in the code above?
I use this in a confluence custom macro.

2

@m.schmidt I’m moving this into the Ecosystem Design category as this topic seems to refer to the AtlasKit library and not a specific Confluence problem.

This should help get the right eyes on it and I’ll ping the AtlasKit team to take a look as well.

1 Like
3

Hi @m.schmidt, this may be caused by the version of styled-components you are using. @atlaskit/dropdown-menu (as well as other @atlaskit components) have a peer dependency of version 3.2.6 of styled-components. Newer versions are known to cause issues.

Here are two CodeSandboxes which demonstrate the problem:

Downgrading your version of styled-components to 3.2.6 should resolve this issue.

If this does not resolve your problem, could you please attach a CodeSandbox or similar replicating the issue so we can investigate further :slight_smile: