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.

  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,

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.