[Feature Request] Reordering selected dropdown items

[fridzema]

In my application i use a lot of dropdowns and they work perfectly! but..... the only question that keeps returning is that it would be nice to reorder the selected items. If you want to change the first item you must clear the whole dropdown and start over again.

Hope this is a bit clear, else i can put some screenshots in it later.

[y0hami]

@fridzema Could you provide the screenshots you mentioned and a JSFiddle if you can.

[fridzema]

Made a fiddle just for the "screenshot". I think this illustrates the problem well. You make a selection like: french, english, dutch But after that it must be dutch english french for example, you need to start over again. Fiddle

In my application they must fill a list with a lot of colors where they know the colors but not exact order at that moment. I have made a page where you can reorder them after adding, but i think it would be nice if they can do this in the dropdown.

[lubber-de]

I think we would have to implement a general dragabble behavior for components to reorder the labels or even menu items . This could also be useful for menu, modal, toast...

[y0hami]

As @lubber-de said we would need to add something like draggable, I personal think this adds a lot of complexity to something like the dropdown component and I'm not sure we should add that kind of behavior.

[prudho]

Maybe we can add a parameter that will allow an auto sort on multiselection dropdowns ? And add a second parameter which will let the user to define a sort method...

[y0hami]

@prudho I think that feel over kill tbh, initially I thought of adding a sort callback option but the problem is the user need to be able to sort the dropdown and adding some sort of filter to it would expand the scope of what the dropdown component is.

[Amerlander]

I also would use this feature, but it would be enough for me when there would be easy ways to integrate other libraries with Fomantic.

Here is a fiddle where I included sortable.js (part of dragable.js): https://jsfiddle.net/9tq7opf0/ The sorting works visually fine, but .dropdown('get value') always returns the unsorted values. I would need some function to reread the values by the actual DOM or to update them in some other way by the dragging API.

[Amerlander]

Here is a little update of that fiddle: https://jsfiddle.net/xn7k0rbL/1/

The sorted values are being logged to the console and it works with multiple instances. But instead of just loging the values I want to write them back to fomantic. Calling $(e.newContainer).dropdown('set exactly', selectedItems); results in an error of Cannot read property 'insertBefore' of null, as well as just $(e.newContainer).dropdown('clear');. But calling $(e.newContainer).dropdown('set selected', ['a', 'b']); works. Any Ideas how to resolve this error?

Edit: Bug or Feature: Drag and Drop between the Dropdowns is working in this setup, but could be improved...

[lubber-de]

@Amerlander The JS error is issued by the sortable library, because your callback is called in between the sortable code. Means, after your callback (where you are modifying the dropdown DOM nodes via set exactly) the sortable library still tries to handle the DOM in some way which is not expected when the callback returns.

The reason is most probably because set exactly as well as clear is removing the DOM nodes for all existing labels inside the multiple dropdown. As the sortable library is actually using / dragging one of the labels, but the fomantic code is removing those by the mentioned behaviors, sortable cannot handle the non existing dom node label anymore because it does not expect them to be removed inside your callback.

IMHO this is more a bug in the sortable library. I would expect that the stop event callback is called at the very end of the dragging proedure (where it should not care about the dragged element anymore if it still exists or was modified).

Possible Workaround: The error does not occur if you use set selected instead. This at least makes sure the dragged value from one dropdown to the other is updated. See https://jsfiddle.net/lubber/rL0ebx6j/4/

btw: your jsfiddle still uses SUI 2.2.7... i updated to recent fomantic 2.8.8 nightly in my jsfiddle (does not make any difference for your situation though)

[Amerlander]

Thank you for your input. They have a (closed) issue about this behavior: https://github.com/Shopify/draggable/issues/92

They mention a workaround, which works:

sortable.on('sortable:stop', (sortableEvent) => {
  setTimeout(() => {
    // Add your code in here
  }, 0)
})

With set exactly the order isn't kept and the UI gets reset. Just calling set selected doesn't remove old elements nor changes it the order of already selected items. Do clear and then set selected is same as set exactly.

My best attempt was to do a clear and then set each value separate:

$(e.newContainer).dropdown('clear');
selectedItems.forEach(element => $(e.newContainer).dropdown('set selected', element));

Sorting on a Dropdown, which isn't based on a <select>-Tag works perfect. Initiate the Dropdown on a <select> element works only if there is no <option> defined. With defined options get selected returns the sorting of initial options, but at least the Visual part in the UI works.

Here is the fiddle: https://jsfiddle.net/jnwu1etL/

One thing to Add here, if I find time I might create an own issue out of this (Update: issue is now here: https://github.com/fomantic/Fomantic-UI/issues/1850 ): While the list of available options hide the A, which is already set as default, it shows the following B, C and E. And while I can't add a letter twice by user input its possible to select them or to have them as default value twice. This way you can select B three times. In my case multiple values are desired, but I would also allow users to input as many times the same value as they want.

[azmeuk]

A real word usecase where I would find this feature useful. In canaille there is a select field where users can choose their favorite language. The SCIM specification we try to follow indicates that users may choose several languages and sort them (with a weight mechanism). A reorderable select field would be a graceful way to achieve this.

https://gitlab.com/yaal/canaille/-/issues/139