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:
Dropdown.tsx:
import * as React from 'react';
import {
DropdownMenuStateless,
DropdownItemGroupRadio,
DropdownItemRadio,
} from '@atlaskit/dropdown-menu';
type State = {
isDropdownOpen: boolean,
};
export default class StatelessMenuExample extends React.Component<{}, State> {
state = { isDropdownOpen: false };
render() {
return (
<div>
<DropdownMenuStateless
isOpen={this.state.isDropdownOpen}
onOpenChange={attrs => {
this.setState({ isDropdownOpen: attrs.isOpen });
}}
trigger="Choose"
triggerType="button"
isMenuFixed
>
<DropdownItemGroupRadio id="cities">
<DropdownItemRadio id="sydney">Sydney</DropdownItemRadio>
<DropdownItemRadio id="melbourne">Melbourne</DropdownItemRadio>
</DropdownItemGroupRadio>
</DropdownMenuStateless>
</div>
);
}
}
Index.tsx:
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;
ReactDOM.render(
<StatelessMenuExample/>,
document.getElementById("filter_dropdown")
);
Any ideas about this problem, what am I doing wrong? Thanks in advance… 
