[Dropdown] Pasting a string containing commas makes a "multiple search selection dropdown" go crazy

[aguyinmontreal]

If you paste a string containing a comma (or multiple commas) into a "multiple search selection dropdown" with the allowAdditions setting set to true, the multiple search dropdown will go crazy and duplicate the string. Then, if you have validations set up, the validations will stay stuck no matter if you remove the corrupted strings.

(you may need to click outside the dropdown then inside the dropdown, then outside again to see the effect).

[awgv]

Hi, could you please provide a test case as per our contributing guidelines? You can fork this JSFiddle.

[aguyinmontreal]

Yes, the test case is the "MULTIPLE" field here https://semantic-ui.com/modules/dropdown.html#tagging-and-user-additions .

Simply paste this string "the Bunny, the Cat, and the Rat", then click outside the dropdown, then inside the dropdown, then outside the dropdown.

[aguyinmontreal]

Got it?

[awgv]

@aguyinmontreal Yes, thank you. I thought it was an issue with a delimiter, but changing it or disabling it does nothing. We’ll investigate.

[amoerie]

I'm running into a similar issue here. Any option where the value has a comma will, at the very least, produce an incorrect value on the hidden input field. Having comma separated values is not really correct imho. Would it be possible to use the hidden input tag as a "template" and duplicate it for every selected value? So instead of

<input name="countries" type="hidden" value="USA, Canada" /> It could automatically produce

<input name="countries" type="hidden" value="USA" />
<input name="countries" type="hidden" value="Canada" />

As a bonus, webservers are generally equipped to properly handle this sort of form input, while the comma separated version requires some custom interpretation code too. (at least in .NET)

Even more, with the current situation, an empty input field (so no selection) causes the webserver to interpret this form field as [null] (an array with null inside) instead of [] or just null.

So I believe it could be possible to fix this problem AND facilitate the lives of people having to implement the backend for semantic UI dropdowns by producing multiple hidden input fields instead of one with a comma separated value.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[rafaelsilverioit]

For reference, tested with version 3.3.1 and it's not fixed yet.

[paul-hph]

+1

[lucasbraum]

Could anyone find a fix for it? Still facing this issue on 2.4.0

[ColinFrick]

@lucasbraum Have you tried the community fork https://github.com/fomantic/Fomantic-UI?

[tares003]

Still having this issue with the latest version.

[lubber-de]

This is fixed in the community fork Fomantic-UI Check the same example and try to enter "the Bunny, the Cat, and the Rat" there

https://fomantic-ui.com/modules/dropdown.html#tagging-and-user-additions jsfiddle here https://jsfiddle.net/lubber/kcn6m1tv/1/

[fotelbazar]

This is fixed in the community fork Fomantic-UI Check the same example and try to enter "the Bunny, the Cat, and the Rat" there

https://fomantic-ui.com/modules/dropdown.html#tagging-and-user-additions jsfiddle here https://jsfiddle.net/lubber/kcn6m1tv/1/

Thats OK, thank you, but please select (after the paste) any option and select nothing (deactivate the control): the last indexed elem added to the selection. In the earlier version (with the comma problem) it works as expected: https://semantic-ui.com/modules/dropdown.html#/examples

Best, Laszlo

[lubber-de]

select (after the paste) any option and select nothing (deactivate the control): the last indexed elem added to the selection.

🤔 Nice catch, seems to affect allowAdditions:true only

@fotelbazar Please create a separate issue at https://github.com/fomantic/Fomantic-UI/issues and we can actively track and will take care of it 😉

[lubber-de]

@fotelbazar I think the problem is the default value forceSelection:true. If you use forceSelection: false this is fixed as expected. See https://jsfiddle.net/lubber/kcn6m1tv/6/ However, I am not sure if SUI was ever respecting that setting correctly. At FUI we already discussed to set the default value for forceSelection to false for v2.9.0 here https://github.com/fomantic/Fomantic-UI/discussions/1745#discussion-29935

[lubber-de]

@fotelbazar Just recognized, we already tracked this issue at https://github.com/fomantic/Fomantic-UI/issues/1742 and the reason/solution is the above mentioned default setting for forceSelection

[lubber-de]

Auto delimiting via paste is now also supported in the community fork Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/2167