search

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.22k stars 4.05k forks source link

Custom element as a placeholder for <Dropdown selection /> #4119

Open notpushkin opened 3 years ago

notpushkin commented 3 years ago

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

welcome[bot] commented 3 years ago

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

notpushkin commented 3 years ago

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!