Atlaskit Dropdown Menu can't select item

Hi all,
I would like to add a dropdown menu to my project using atlaskit libraries. In order to see how it works, I’ve basically copied the stateless dropdown menu example from atlaskit web page. I’m using react with typescript in my project. After adding the example code, which I’ll share below, dropdown menu is added to my example html file. When I click the dropdown button the menu opens but when I try to select an item menu closes itself and no item is selected. The code is like below:


import * as React from 'react';
import {
} from '@atlaskit/dropdown-menu';

type State = {
    isDropdownOpen: boolean,

export default class StatelessMenuExample extends React.Component<{}, State> {
    state = { isDropdownOpen: false };

    render() {
        return (
                    onOpenChange={attrs => {
                        this.setState({ isDropdownOpen: attrs.isOpen });
                    <DropdownItemGroupRadio id="cities">
                        <DropdownItemRadio id="sydney">Sydney</DropdownItemRadio>
                        <DropdownItemRadio id="melbourne">Melbourne</DropdownItemRadio>


import * as React from "react";
import * as ReactDOM from "react-dom";

import StatelessMenuExample from "./Dropdown";

import { Graph } from "./modules/graph/Graph";

import axios from 'axios';

declare const AP: any;


Any ideas about this problem, what am I doing wrong? Thanks in advance… :slight_smile:

1 Like

Did you ever find a solution to this issue?

Not yet, unfortunately…

I had the same problem. It was due to version of styled-components in package.json. Once I downgraded it from 4.4.1 to 3.2.6, it was fixed.

Thank you for your response, when I try, I’ll let you know whether it worked for me or not.