AtlasKit DropdownMenuItem doesn't fire onClick()

Confluence Development Confluence Cloud
1

I have a AtlasKit DropDownMenu and try to get onClick events

<DropdownMenu
isLoading={isLoading}
trigger="Chapters"
triggerType="button"
position="bottom right"
onOpenChange={(event) => console.log(11.1, { event })}
shouldFitContainer
>
<DropdownItemGroup>
    <DropdownItem
        elemBefore={<AddItemIcon label="add-chapter" />}
        key="add-chapter"
        onClick={(event: MouseEvent | KeyboardEvent) =>
            console.log(11.2, { event })
        }
    >
        Add current video position ...
    </DropdownItem>
    <hr />
    {chapterItems.map((item, i) => (
        <DropdownItem
            elemAfter={
                <ActionIcon>
                    <EditorRemoveIcon label="remove-chapter" />
                </ActionIcon>
            }
            key={`chapter-${i}`}
            onClick={(event: MouseEvent | KeyboardEvent) =>
                console.log(11.3, { event })
            }
        >
            {item.label}
        </DropdownItem>
    ))}
</DropdownItemGroup>
</DropdownMenu>

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

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

1 Like
2

Hi @m.schmidt,

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: @atlaskit/dropdown-menu-04-dropdown-item (forked) - CodeSandbox

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?

3

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

4

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".
1 Like