Display Problem UX Autocomplete / TomSelect

[simonsolutions]

I have the problem with the newest version, that on grouped Autocomplete/TomSelect, the selected item gets duplicated to the end of the list, or sometimes the grouping completely disappears.
Like in this example:
Before selecting a different item:

After selecting the other item:

With other UX Autocompletes the items are additionally added to the bottom of the list as new items.

Tested on safari and firefox.
symfony/ux-autocomplete 2.16.0
tom-select 2.3.1

Does anyone have these effects too?

[smnandre]

Do you use LiveComponent or is this with Autocomplete "only" ?

[simonsolutions]

It is only the autocomplete without the live component.

[smnandre]

When you say "newest version" do you know if you used Autocomplete 2.14 or 2.15 previously ?

Could create a minimal reproducer ? That would be a great help to start the investigation / bug fix :)

[simonsolutions]

I just recognised the behaviour yesterday with 2.16, and also tried 2.14 and 2.15 now, that happens also with these versions.

Here is a minimal project (blank Symfony project) that reproduces the behaviour:
https://github.com/simonsolutions/symfony_ux_auto_problem

[smnandre]

Thank you for the reproducer

So it seems to me TomSelect move the option outside the original group, but i'm not sure how to fix / compensate this :|

[simonsolutions]

That explains the behaviour, but not why it occurs.

They released last time in Oct 2023: https://github.com/orchidjs/tom-select/releases

I'm not sure if it already happens since then. But does it make sense to downgrade the tom select below 2.3?

[smnandre]

Can you remove the groups temporarely ?

[simonsolutions]

In the reproducer I added one UX Autocomplete/Tom select without the groups. That works fine, but for my project the groups are necessary.

[smnandre]

And does it work without UxAutocomplete ?

[simonsolutions]

I tried it on the reproducer with tom select 2.3.1, 2.3.0 and 2.2.2 and the problem occurs on all versions. I'm not really sure if its a problem on tom select or Symfony ux component?!

[smnandre]

Even with just TomSelect and no UXAutocomplete ?

[simonsolutions]

It was with UX Autocomplete.
I now tried also the tomselect only. Here is a simple HTML file with just a tomselect. It works just fine for me - the problem does not occur:
https://github.com/simonsolutions/symfony_ux_auto_problem/blob/main/test.html

[smnandre]

So they do have the same problem, as the real <select> HTML code is messed with

[simonsolutions]

For me the simple HTML tomselect sample worked, now I am confused. that the test.html not work for you or is the code just wrong but displayed correctly?

[smnandre]

Just saw this in the documentation, maybe you could try with the options as shown here ?

https://symfony.com/bundles/ux-autocomplete/current/index.html#manually-using-the-stimulus-controller

Not sure if that can/should be in the JS options to TomSelect, or in the form... but this is something you should investigate, as TomSelect has some documentation on it: https://tom-select.js.org/plugins/optgroup-columns/

{
    "results": {
        "options": [
            { "value": "1", "text": "Pizza", "group_by": ["food"] },
            { "value": "2", "text": "Banana", "group_by": ["food"] }
        ],
        "optgroups": [{ "value": "food", "label": "food" }]
    }
}