AtlasKit DropdownMenuItem doesn't fire onClick()

I have a AtlasKit DropDownMenu and try to get onClick events

position="bottom right"
onOpenChange={(event) => console.log(11.1, { event })}
        elemBefore={<AddItemIcon label="add-chapter" />}
        onClick={(event: MouseEvent | KeyboardEvent) =>
            console.log(11.2, { event })
        Add current video position ...
    <hr />
    {, i) => (
                    <EditorRemoveIcon label="remove-chapter" />
            onClick={(event: MouseEvent | KeyboardEvent) =>
                console.log(11.3, { event })

onOpenChange is firing, onClick not. Why could this be?

I have “@atlaskit/dropdown-menu”: “^10.1.2”,


From what I can see in your example the code should work - i’ve tested it out in a sandbox and both onOpenChange and onClick are firing console logs:

Given that’s the case, could there be something in the surrounding code that is causing an issue? Or could there be a problem with dependencies?

I changed to using the Stateless variant. That works fine.

I have the same issue as described in the first post. In my case, it’s due to styled-components >= 4.0.0. I guess this warning is related:

The "innerRef" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use "ref" instead like a typical component. "innerRef" was detected on component "Droplist__Trigger".