Semantic-UI-React
Semantic-UI-React copied to clipboard
Custom element as a placeholder for <Dropdown selection />
Problem description
On a project I'm currently working on, we're using multiple selection Dropdown to pick a list of conditions for filtering, with empty state meaning “do not filter at all”. A design requirement was to show a Label similar to a selected item, but without the × icon:

Currently, this can be done by passing a Label in the trigger prop if there is no options selected (see codesandbox), but this feels like a hack and produces the Prop `trigger` in `Dropdown` conflicts with props: `selection`. They cannot be defined together, choose one or the other. warning, so I'm looking for a more stable solution.
Proposed solution
Allow custom elements to be passed as a placeholder for dropdowns. Do not apply custom styling to them.
MVP
Here's the solution with trigger that we're currently using: https://codesandbox.io/s/semantic-ui-react-forked-1fbjt
👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
Figured out setting a className="selection" directly instead of a selection suppresses this warning, but getting this usecase officially supported would be really nice to have, too!