How to access the list of selected DropdownItemCheckboxes in @atlaskit/dropdown-menu

Question

There is no documentation or examples for DropdownMenu which show how to obtain and react to modifications to the state of DropdownItemCheckbox items. Some of the relevant features seem to have been deprecated. How is this done now?

I would like the user to be able to see a list of sprints, epics and version defined in Jira and show the filtered content of the board (ie duplicating some of the functions of the Backlog screen). To do that the user must select what they are interested in so my back-end can go and do it's work over that selection.

Answer 1

You should be able to track the selection/unselection of items by putting an onClick handler on each <DropdownItemCheckbox> and storing the selected status of each dropdown item in React state - it looks like that's not documented at https://atlaskit.atlassian.com/packages/core/dropdown-menu

I've put together a quick live demo at https://codesandbox.io/s/9jqyk1pw5o and the code is below as well.

import React from "react";
import { render } from "react-dom";
import Dropdown, {
  DropdownItemCheckbox,
  DropdownItemGroupCheckbox
} from "@atlaskit/dropdown-menu";
import "@atlaskit/css-reset";

class App extends React.Component {
  state = {
    selectedItems: ["js"]
  };

  handleSelection = id => () => {
    const { selectedItems } = this.state;
    if (selectedItems.includes(id)) {
      this.setState({
        selectedItems: selectedItems.filter(item => item != id)
      });
    } else {
      this.setState({
        selectedItems: [...selectedItems, id]
      });
    }
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <div style={{ padding: 40 }}>
        <p>Selected items: {selectedItems.join(", ")}</p>
        <Dropdown defaultOpen triggerType="button" trigger="Drop menu">
          <DropdownItemGroupCheckbox id="languages2" title="Languages">
            {["js", "java", "ruby"].map(id => (
              <DropdownItemCheckbox
                id={id}
                key={id}
                isSelected={selectedItems.includes(id)}
                onClick={this.handleSelection(id)}
              >
                {id}
              </DropdownItemCheckbox>
            ))}
          </DropdownItemGroupCheckbox>
        </Dropdown>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

There is also a developer preview of a Select component https://atlaskit.atlassian.com/packages/core/select