Semantic-ui-react: Dropdown gets ugly when "selection" attribute is missing.

[raptoria]

the border is missing, there's no minimum width for input or placeholder, etc.
any quick fixes?

I'm doing something like this

       <Dropdown placeholder='Select Baskets..' search className={styles.root}>
          <Dropdown.Menu>
            { this.props.values.map((option) => 
              <Dropdown.Item key={option.value} >
                <Icon name='attention' className='right floated' />
                 {option.text}
              </Dropdown.Item>
              )}
          </Dropdown.Menu>
        </Dropdown>

[levithomason]

This is intentional. The Dropdown can be either a dropdown menu:

Or a selection dropdown:

any quick fixes?

It is not clear what is broken or what your expectations are. With a little more info, I may be able to point you in a better direction. What exactly are you trying to achieve?

[raptoria]

Oh I see, I didn't realize it was intended behavior. I guess the problem is that I've defined my Dropdown items using JSX so I get this error when using the selection attribute

Warning: Failed prop type: Prop selection in Dropdown conflicts with props: children. They cannot be defined together, choose one or the other.
in Dropdown (created by AssignBasketDropdown)
in AssignBasketDropdown (created by Connect)
in Connect (created by AssignBasketModal)
in div (created by ModalContent)
in ModalContent (created by AssignBasketModal)
in div (created by Modal)

is this part of #1380 ?

[levithomason]

TL;DR #1380 does not resolve the warning but tries to clarify why it is temporarily present.

More info:
The error was attempted to be clarified in #1380 by updating the examples and the info messages shown above each example, however, the issue itself was not resolved.

The Dropdown's parent-child coupling with the items can only be instantiated if you use the options prop and allow the Dropdown to create the children. During creation, the coupling is managed along with future state changes.

If you use children, there is no way for the Dropdown to add the necessary event handlers to the items. Therefore, the Dropdown cannot manage the state of the items for you. Hence, we show a warning as using with selection will result in a Dropdown that appears as a select but does not correctly function like one. You'd have to wire all your own event handlers and state management, which, for this component is no small undertaking :) The component is about ~1200 LOC to do what it currently does.

[raptoria]

i see. thanks for the clarification!

[hkjpotato]

Does it mean that if I want to create the dropitem explicitly by xxxx, then I cannot rely on the 'onChange' props of the to get onChange event?

I really want to customize the Dropdown.Item. I want to color the label in a different color(not the default color options). Thank you.

[levithomason]

Does it mean that if I want to create the dropitem explicitly by <Dropdown.Item>xxxx</Dropdown.Item>, then I cannot rely on the 'onChange' props of the to get onChange event?

Yes. This makes since if you think about it. You aren't calling onChange when a user clicks the Dropdown.Item. When you use options, we add the appropriate handlers and state management to call onChange with the correct data.

If you skip our options prop you skip our construction of the items. Therefore, you're left to your own code to handle those cases.

I really want to customize the Dropdown.Item. I want to color the label in a different color(not the default color options). Thank you.

You can customize the labels of a multiple section Dropdown with the renderLabel callback prop.

https://react.semantic-ui.com/modules/dropdown

[mpereiraesaa]

How to avoid this warning where you are intentionally choosing to add selection prop and doing your own options management rendering Dropdown.Items with his owns onClick etc, because its always screaming the warning message but we are already managing our own state and data inside the Dropdown, there should be a way where you can make this appear as a select but behave like you wanted.

[brianespinosa]

@ManuelPereira2016 technically, I think you can just add className='selection' to your Dropdown component to get the missing class and styles.