提交选中的 Atlaskit Dropdown(@atlaskit/dropdown-menu) 菜单复选框，点击项目

Question

I am using @atlaskit/dropdown-menu ( https://atlaskit.atlassian.com/packages/core/dropdown-menu ). I would like to submit a small form on Item click, I need to submit values of DropdownItemCheckbox .

Here is a code to render needed components: https://codesandbox.io/s/py8qoo64mq

import React from "react";
import Dropdown, {
  DropdownItemCheckbox,
  DropdownItemGroupCheckbox,
  DropdownItem
} from "@atlaskit/dropdown-menu";

export default () => (
  <Dropdown defaultOpen triggerType="button" trigger="Drop menu">
    <DropdownItemGroupCheckbox id="languages2" title="Languages">
      <DropdownItemCheckbox defaultSelected id="js-check">
        JavaScript
      </DropdownItemCheckbox>
      <DropdownItemCheckbox id="java">Java</DropdownItemCheckbox>
      <DropdownItemCheckbox defaultSelected id="ruby">
        Ruby
      </DropdownItemCheckbox>
    </DropdownItemGroupCheckbox>
    <DropdownItem>Submit</DropdownItem>
  </Dropdown>
);

I don't want to use Select because I want to trigger dropdown list with a custom button, and use layering advantages of DropdownMenu

Answer 1

I had the same issue, and after a lot of research i found that the problem was caused by styled-components package, but it works with if the version is <=3.5.0-0. So my solution was to downgrade styled-components package to 3.5.0-0. This does not explain why it doesn't work because they are just styles. But for now this is a workaround.

After i raised an issue, Atlassian sent me the following response that i think will answer your questions.

Atlaskit doesn't officially support styled-components v4 and above. We currently require that our consumers use SC v3.2.6 as per our peer dependency. However, recently there has been some ongoing work to upgrade / migrate Atlaskit to a more modern css-in-js library and we're working through the decision making process internally at the moment. Please feel free to follow this ticket for status updates: https://ecosystem.atlassian.net/browse/DS-6836