Dropdown: Search selection dropdown takes value of first option when user did not make a selection

[mikescott]

Bug Report

A search selection dropdown will take the value of the first option even though a user did not select an item from the dropdown list.

This seems to be the same as an old Semantic UI bug: Semantic-Org/Semantic-UI#4506

Steps to reproduce

1. Visit https://fomantic-ui.com/modules/dropdown.html#/examples
2. Open the countries dropdown in the 'Clearable' example
3. Click anywhere on the page

Expected result

Dropdown should have no value/display placeholder ("Select Country")

Actual result

Dropdown takes the value of the first option (in the example, this is Afghanistan)

Version

2.7.4

[lubber-de]

What about the mentioned workaround by using forceSelection:false.
This still works fine.

[y0hami]

@mikescott Is this still an issue or can we close this now?

[DeveloperSlope3]

It's a bug.

In my case I don't have any "empty" option (there is always a value set loaded from DataBase), but the error is nearly the same: when I start to write the list, it filters the options (the expected behaviour), but when I click on the desired option, the previous value is set again. On the DOM the input remains the old value, and the selected class is still on the old value.

However, if I search on the whole options list the option (without filtering by writing on the input) and click, the value is updated and succesfully selected.

Thanks a lot!

PS: I'm on v2.7.5

[PhilippGrashoff]

This actually can be a very nasty one if theres an onChange event which submits the form. Even though user just clicks the dropdown arrow and focuses elsewhere then, the form is submitted.

[hamedwiz]

Any updates on this?
Having the same issue

[lubber-de]

@hamedwiz Did you try the workaround forceSelection:false ?

[hamedwiz]

yes that didn't work

[lubber-de]

@hamedwiz 🤔
See difference here : http://jsfiddle.net/rgmn87ab/
The right dropdown using forceSelection: false works .

Could you please adjust the jsfiddle where forceSelection: false does not work for you ?

[hamedwiz]

I was using it like this $('.ui.dropdown').dropdown("settings","forceSelection",false);
using this way: $.fn.dropdown.settings.forceSelection = false;
solved the issue
thank you

[yehudahkay]

As far as I can tell forceSelection doesn't help, however adding value="" to the option helps. Probably there should be a better solution to this.