[Dropdown] Clearable remove icon visible by default

[TivoSoho]

Steps to reproduce

1. Create clearable dropdown with placeholder anything but 'auto'

Expected result

No selection = no remove icon

Actual result

Shows remove icon even when nothing selected. Once you either click it or choose the empty option it goes away and does not reappear. It is not adding the noselection class to select on init.

Testcase

https://jsfiddle.net/pn12f3Lr/2/

Version

2.7.6

[lubber-de]

@TivoSoho I nearly spent the whole weekend for this 👀 . The conclusion is, that the current behavior is correct. Let me explain:

• By design a <select> tag (standard HTML) always has one value selected (either the first one or the one defined by attribute selected). To somehow avoid this, one (usually the first) option has to be an empty option (value="") (like you did in the jsfiddle).But that only means there is still one option selected, but, because this one has value='', it looks like "nothing" is selected (but technically it still is!).
• The conversion FUI does when using <select> tags as dropdown base is basically the same: An empty option (value='') means "nothing" is selected.
• When placeholder is set to auto then an option using the '' value is used to display the placeholder value and removed from the selectable list
• When placeholder is set to something else, then an existing '' value option stays as a valid selectable entry from the dropdown. This is also stated in the docs for the placeholder setting already:

  ... Leaves "" as a selectable option ...

• So: If you leave "" as a selectable option but still make it clearable, FUI just cannot differ between an empty entry and an identifier to show the placeholder (which is not supported by a usual HTML-select tag)

When using <select> as a base for dropdown, you have to decide if you want an empty entry (value="") to be selectable from the list or use the clearable and placeholder functionality FUI provides.
So, you either need to remove the empty option when using anything else than 'auto' , but then the first entry of the list is selected (as said unless on option is already defined as "selected"). If this entry is still an empty option then this one gets "selected" , thus is "clearable" by design. it just looks weird, because you think its a bug that i can clear an empty value.

A combination of having both, an empty option value being selectable and making it clearable, simply does not work together logical wise. And after the weekend debugging nearly the whole dropdown component, i am convinced this logic is correct.

When you need to

• have an individual placeholder
• still use the <select> tag
• make it clearable

-> remove the empty <option>
-> use placeholder: 'Whatever you like'

or

• if the initial value has to be empty/cleared

-> use an empty option with a text representing your desired placeholder as a first option
-> keep using the default placeholder:'auto'

Your adjusted fiddle as follows https://jsfiddle.net/w4vgxfn5/

[TivoSoho]

I disagree. For us clearable icon is an extra to quick clear - we do not want to replace choosing empty. Having 2 methods to clear a value is not illogical by any means. For us clearable broke when moving from Semantic UI to Fomantic. This is a sample with Semantic UI working beautifully in all cases: https://jsfiddle.net/vL8da4y2/

And finally, to quote your own text - "By design a tag (standard HTML) always has one value selected (either the first one or the one defined by attribute selected). To somehow avoid this, one (usually the first) option has to be an empty option (value="")". So by design the empty option is meant to be a "nothing selected", which Fomantic fails to identify. And while I do not have any idea in what case where you need to really unselect an "empty" option that could be an extra feature, a strict mode, but not default.

[TivoSoho]

And to add one point that is important to me and our site - if you were to remove Fomantic UI (and it's weird definition of clearable) you are losing/breaking functionality. You would have to go through each select to make sure it has the empty option.

[lubber-de]

Thanks for the jsfiddle...i am digging into the SUI code again. It is correct, FUI currently fails to identify because of the "" value in both cases.... i'll investigate again..if SUI can do it, FUI will do it as well 😄

[lubber-de]

Fixed by #889
See your adjusted jsfiddle here https://jsfiddle.net/dfp09hLz/

@TivoSoho Please accept my apologize for arguing into the wrong direction! The behavior is now identical to SUI again 😃

[TivoSoho]

@lubber-de You're my superhero now for fixing this! Many thanks!!