fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.52k stars 329 forks source link

[dropdown] clearable multiple search selection dropdown #3043

Closed mdrxy closed 2 months ago

mdrxy commented 2 months ago

Feature Request

I understand that selection dropdowns can be made to allow users to clear their selection, but I can't seem to make this feature work on multi select dropdowns. Each selection pill can be removed individually (via the x button) though I would appreciate a "clear all" x for the field like in the screenshot below.

Example (if possible)

Screenshot 2024-05-07 at 18 51 03

Screenshot (if possible)

Screenshot 2024-05-07 at 18 48 27 Screenshot 2024-05-07 at 18 57 15
lubber-de commented 2 months ago

This is already working as expected (even at the linked example on the fomantic website) See https://jsfiddle.net/lubber/1ockrwnd/2/

Please adjust the jsfiddle according to your code/ use case where it does not seem to be working for you

image

mdrxy commented 2 months ago

I found the issue I was facing: the ordering of the dropdown icon. If it is placed as the last child of the dropdown div, the clear x button doesn't appear.

Problematic code:

Screenshot 2024-05-11 at 17 15 50

Fixed:

Screenshot 2024-05-11 at 17 16 21

The only thing now would be exploring whether the two icons could be centered vertically:

Screenshot 2024-05-11 at 17 16 51