[Bug]: Dynamically added options not show when added first time

[pgodowski-jt]

Bug description

I have two select fields. On change of first one, the second is filled dynamically. Recently I updated webpack and encore. After that, at the first change of first select, the second is not updated (despite of instance options are well filled). But when I change value of first select again, everything works ok.

Expected behavior

Everything works from first time.

Steps to reproduce

First select:

<select id="demand_cosAgency" name="demand[cosAgency]"
        class="form-control-sm tomselected ts-hidden-accessible">
    <option value="" selected="selected">- Select an agency -</option>
    <option value="141">Label 141</option>
    <option value="183">Label 183</option>
    <option value="197">Label 197</option>
    ...
</select>

Second select:

<select id="demand_client" name="demand[client]"
        class="form-control-sm tomselected ts-hidden-accessible">
    <option value="">- First select an agency -</option>
</select>

Javascript part included in $.ajax complete(response) ):

const tomSelectInstance = document.getElementById('demand_client').tomselect;
      tomSelectInstance.clear();
      tomSelectInstance.clearOptions();
      tomSelectInstance.clearCache();
      tomSelectInstance.settings.maxOptions = null;

      console.log(response.responseJSON.agencyClients);

      $.each(response.responseJSON.agencyClients, (k, v) => {
        tomSelectInstance.addOption({ value: k, text: v });
      });

      tomSelectInstance.settings.placeholder = '- Select a client -';
      tomSelectInstance.open();

      console.log(tomSelectInstance.options);

      tomSelectInstance.clearCache();
      tomSelectInstance.sync();
      tomSelectInstance.refreshOptions();

Results of console.log(response.responseJSON.agencyClients);:

{
    "2340": "Label text",
    "2341": "Another label text",
    "2342": "blablabla",
    "2343": "text text"
    (...)
}

Results of console.log(tomSelectInstance.options);:

{
    "2340": {
        "value": "2340",
        "text": "Label text",
        "$order": 1,
        "$id": "demand_client-opt-1",
        "$div": {div#demand_client-opt-1.option.active}
    },
    "2341": {
        "value": "2341",
        "text": "Another label text",
        "$order": 2,
        "$id": "demand_client-opt-2",
        "$div": {div#demand_client-opt-2.option}
    },
    "2342": {
        "value": "2342",
        "text": "blablabla",
        "$order": 3,
        "$id": "demand_client-opt-3",
        "$div": {div#demand_client-opt-3.option}
    },
    "2343": {
        "value": "2343",
        "text": "text text",
        "$order": 4,
        "$id": "demand_client-opt-4",
        "$div": {div#demand_client-opt-4.option}
    }
    (...)
}

There are no #demand_client-opt-*.option divs on the page after first call. And after second one, everything works well.

I tried to add setTimeout, but nothing change.

Additional context

Symfony 6.4.10 with Twig.
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.12.1
Yarn: 1.22.22
npm: 8.19.2
Browsers:
Chrome: Chromium (127.0.6533.72)
Firefox: 128.0.3
Packages:
postcss-loader: ^7.0.1 => 7.3.3
sass-loader: ^13.0.2 => 13.3.2
webpack: ^5.* => 5.93.0
webpack-cli: ^5.* => 5.1.4
webpack-notifier: ^1.15.0 => 1.15.0
tom-select: ^2.* => 2.3.1

[pgodowski-jt]

I found, that it works on Symfony 6.2 but stop works on Symfony 6.3.
There is some init problem. I turned off symfonys' autocomplete and init tomselect manually if needed. And it works now.

[github-actions]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days