What determines order of items in a dropdown

I’m populating a dropdown using a data query. The results of the array are sorted in the order I need but the dropdown populated from it displays a different order. The image below shows the dataArray in the preview log and the opened dropdown.


When I select an item from the dropdown, then the correct label and value are returned e.g Selecting LG01 returns an index of 8. Can anyone explain what determines the display order and can it be controlled?

@allentrev88 I can’t think of anything other than the possibility that the dropdown list is set to a dataset and the results of the array are not assigned to the dropdown options property in the .then portion of the code after the query runs. You didn’t post any code, so I’m offering my best guess.

Hello Anthony,
The dropdown is not connected to a dataset, nor is is it set up with any managed choices. It is populated using the code:

let wDataArray = await getCompetitions();
if (wDataArray){
console.log(wDataArray);
$w( ‘#drpCompetition’ ).options = wDataArray;

where getCompetitions is a backend function that returns the data wDataArray that is output in the console log shown in the original post.

Functionally, I’m ok. Its really just a usability issue because the dropdown is in such an unordered state.

That is odd. Your console.log is immediately before the options assignment and the sort order in the array is what you need at that point. Is the dropdown showing the order in which the records were added to the collection?

Anthony,
Fascinating. I’ve checked against the original collection and the dropdown is showing the records are sorted by ascending Title field, which is of course, the main reference field of the collection, as I simply re-used it when manually creating the collection. If I was to define a primary, unique key, it would have to be a combo of two other fields, and I haven’t bothered to do that. I simply re-used the Title field meaning it to be a descriptor, not a primary key.

However, I’ve no idea how this knowledge has got passed to the dropdown. This is the main query:


so the returned data array should only contain {label, value} entries, which is what we see in the log output.
Any ideas?

Trevor, I just constructed a backend function with a query similar to what you have, and the dropdown order matches the query results. In other words, it functioned as you would expect.

You might simply delete the dropdown and create a new one. Nothing else comes to mind at the moment.

@allentrev88 Hi. I’d suggest to try and add a fresh dropdown component and populate the collection results there, as @tony-brunsman suggested. If that wouldn’t work, please post a link to your website (live version is enough) and I’ll take a look.
Regards, Alex

@aleksander-denga @anthonyb Well. This morning I’ve gone into the site to arrange access to the site for Alex, and behold, the page is now behaving as expected. I’ll have to add it to the list of unexpected behaviour I’m having with the Editor at the moment since I upgraded to Ubuntu 20.04. I’m closing this thread now since there seems to be nothing to be gained from it.
Regards, Trevor
PS: Alex, did you add a Test Test site member to my site?