Reputation: 1137
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.
Upvotes: 0
Views: 129