Dropdown: combine allowAdditions(selection, search) with Dropdown Content

[craig1123]

Is it possible to have 2 different sets of Dropdown Content with the option to add additions and search them (like the screenshot below)?

Right now, I'm getting these errors as I try it:

• "Failed prop type: allowAdditions prop in Dropdown requires props: options."
• "Failed prop type: Prop children in Dropdown conflicts with props: selection. They cannot be defined together, choose one or the other."

The code below would be what it might look like.

<Dropdown
    selection
    search
    allowAdditions
    onAddItem={this.handleAddition}
    onChange={this.handleChange}
    placeholder='Add(by typing name)/Select Unit'
    >
    <Dropdown.Menu>
        <Dropdown.Header content='Standardized Units' />
        <Dropdown.Divider />
        {
          unitOpt.map((unit, i) =>
             <Dropdown.Item description={unit.description} text={unit.text} key={i}/>
        )}
       <Dropdown.Header content='Other Units' />
       <Dropdown.Divider />
       {
         otherUnits.map((unit, i) =>
            <Dropdown.Item text={unit.text} description={unit.description} key={i}/>
       )}
   </Dropdown.Menu>
</Dropdown>

Version

0.61.10

[levithomason]

We desperately want to support this. The issue right now is how to handle the child menu/item coupling. I don't have bandwidth at the moment to do this, so, I've been working around it myself :/

I believe the answer is, just as with all our other components, allow a "shorthand" object definition of the menu/items. This way, dividers and such can be inserted, but the Dropdown will be responsible for adding all the proper callbacks and managing state for them (it does quite a bit in this regard, keyboard bindings, open state, selected/active state, etc.)

You can see some ideas proposed in #889. I've also begun the infancy stage of this by allowing Dropdown options to accept shorthand values, see #1038.

I'll close this issue in favor of #889, let's move any convo there. The core issue/feature is the same, the ability to define any menu with any allowed set of children and have it "just work".

[anuragsinghtomar]

I am getting following error when Search Element first render. Can any body have facing this issue? How to resolve this

Failed prop type: Prop input in Search conflicts with props: children. They cannot be defined together, choose one or the other