Semantic-UI-React icon indicating copy to clipboard operation
Semantic-UI-React copied to clipboard

Custom element as a placeholder for <Dropdown selection />

Open notpushkin opened this issue 5 years ago • 2 comments

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:

image

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

notpushkin avatar Nov 23 '20 12:11 notpushkin

👋 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.

welcome[bot] avatar Nov 23 '20 12:11 welcome[bot]

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!

notpushkin avatar Dec 08 '20 11:12 notpushkin