[Pro Forms] single option Select Field automatically sorts options alphabetically when "Modern" selected

[MadeFreshDesign]

When using the single option Select Field normally the choices appear in the order they are in the structure panel. When you turn on the “Use modern styling” option then the options get sorted alphabetically which can be undesirable in many cases.

I checked the Choices documentation and they have a built in option to turn sorting on/off but it doesn’t appear to be something we can control with classes or attributes. They also don’t give an option how to use it in code or I would have tried that.

Choices-js/Choices/blob/master/README.md#shouldsort

[manc]

Not a solution yet but it seems like we just gotta figure out how to access the choices instance. When I try programmatically changing the config, it tells me that I’m trying to access an already initialized choices element.
However when I try to destroy() it first, it gives me an error that the method doesn’t exist.

I suspect we can somehow get the choices instance via bricksforgeData or something, but can’t seem to figure it out right now

EDIT:
Found a hacky, temporary solution. This is by no means ideal but it works with relatively low effort, till the proper solution comes along

Basically, we need to just initialize choices ourselves. That means loading all the scripts etc ourselves as well. Since it’s a temp solution we can just use another modern select to load em for us though.

So add 2 selects:

1. A select that we only use to load the scripts n styles. Enable “use modern style” on this one and then hide it via css or just setting it to display: none
   

   

2. The select we actually want. Add all your options etc and add a class to it, in my case I gave it a class of .modern_select
   

   

Finally, add a new event in thr BfPanel

and in the JS field add this:

const element = document.querySelector(".modern_select select");
element.setAttribute("data-type", "select-one");
 
const choices = new Choices(element, {
  shouldSort: false,
});

The options given to the select via the UI persist and just don’t get sorted.

Again, not ideal but does the trick in a pinch

[Daniele]

Thanks @manc for your hard work here!

I’ve set the default value for shouldSort to false in the next version. I agree that choices should not be responsible for re-sorthing the options.

Will be included in the next version which I deploy tomorrow