Dropdown suggestions: controlled children

[2manyvcos]

I would like to create a dropdown with controlled children.

An example case would be a multiselection dropdown with checkboxes.

I have two suggestions to make this possible:

• Pass control properties to the direct child

    const DropdownMenuView = ({
      dropdownControls: {
        currentValue,
        setValue: function,
        closeMenu: function,
      },
      ...otherProps
    }) => ...;
  
    <Dropdown ...>
      <DropdownMenuView />
    </Dropdown>
  

  This would mean that the users would have to implement the selection logic theirselves but would add a lot of flexibility.

  This line could be edited to pass the props down.

  Semantic-UI-React/src/modules/Dropdown/Dropdown.js

  Line 1185 in 292c595

  return cloneElement(menuChild, { className, ...ariaOptions })

• Handle <Dropdown.Item /> children

    <Dropdown ...>
      <div>
        <...>
          <Dropdown.Item ... />
        </...>
        <Dropdown.Item .../>
      </div>
    </Dropdown>
  

  This would be really easy to use as the Item's values should be handled by the Dropdown itself.
  This approach would allow nearly anything as one could use a ref to the items to modify their value.
  This could be implemented by using React's context API for instance.

The advantage of the first approach would be that there would be nearly no limitations but it would mean that the user would need to write some of the logic himself.
The second approach would be a lot more clean and simple but would then again create some limitations as you would be forced to use <Dropdown.Item>.

What do you think about this?

[levithomason]

Ultimately, this is beyond the scope of the component. I don't think there is a common enough use case for it.

Interacting with child components is not supported. We plan to remove the ability to pass children in the future. Instead, we'll likely have some kind of menu prop and/or items prop. See #1757 for the latest thoughts. You can also search our issues for "RFC Dropdown".

This would mean that the users would have to implement the selection logic theirselves but would add a lot of flexibility

This is one of the main reasons we plan to pull all support for children. It is not practical to implement this logic on your own. The Dropdown is ~1,300 lines, almost all of which deals with the logic for handling the menu and the items.

Workaround

You may be able to use the content prop to render a more complex child in the item if you wish.

https://react.semantic-ui.com/modules/dropdown#dropdown-example-item-content

Another option is to use a Popup instead, with a Form inside that contains your checkboxes.