Semantic-ui: [Dropdown] Reset / Clear icon for Semantic UI single selection dropdown.

[kmd1970]

I needed an easy way to clear a single selection dropdown, so I came up with this example (select an option, then click the remove icon on the left to clear the selected value) :

https://jsfiddle.net/kmd1970/hgufwj03/

I wish this feature was included in Semantic UI. Users need a way to clear/reset a non-required dropdown field.

[kmd1970]

Yes, as shown in my example?

[jokeronaldo]

Unusual but functional. Add to enhancement.

[xDaizu]

It looks nice, could be useful as an option. I added a couple of suggestions to consider:

1. The click event doesn't bubble so clearing doesnt open the select

$('.ui.dropdown .remove.icon').on('click', function(e){
      $(this).parent('.dropdown').dropdown('clear');
    console.log('clear');
    e.stopPropagation();
}); 

1. new CSS rule so the x is not shown when nothing is selected

.ui.dropdown input[value=''] ~ .remove.icon, .ui.dropdown input:not([value]) ~ .remove.icon
{
   opacity: 0.0;
}

https://jsfiddle.net/dbr26njq/1/

[martin-koroudjiev]

Thanks for the work. I noticed it doesn't work if the dropdown is searchable so I added some CSS rules to move the search input a bit to the right and to align nicely the default text:

.ui.dropdown input.search {
  margin-left:15px;
}
.ui.dropdown .text.default{
  margin-left:-15px;
}
.ui.dropdown input[value=''] ~ input.search, .ui.dropdown input:not([value]) ~ input.search {
  margin-left:0;
}

I also added support when the dropdown is in loading state. The problem was that the CSS loading rules applied to both icons thus resulting in two spinning circles.

.ui.dropdown.loading .remove.icon:after, .ui.dropdown.loading .remove.icon:before {
  content:none;
}
.ui.dropdown.loading .text {
  margin-left:-15px;
}

https://jsfiddle.net/dbr26njq/3/

[GuillaumeSTEIN]

We definitively need this as an option :)

[larvanitis]

I prefer it on the right side, before the dropdown icon. It simplifies the styling as well.

https://jsfiddle.net/dbr26njq/287/

Edit:
Even cleaner CSS https://jsfiddle.net/dbr26njq/288/

[musicao]

Using only js/jquery
var elemento = $("idElementoSelect).next().next();
elemento.html('text';)

[dlynchcodes]

This is dope. I'm using this in my project. It would be very cool to have this as an official option.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[neokio]

Bump ... This is a necessary enhancement.

[miguelcaravantes]

i wanna this feature too, something like react-select will be cool

[Dr-Horv]

Has this been included in the react-version yet?

[lubber-de]

Fixed in https://github.com/fomantic/Fomantic-UI 2.4.2