manual call function load() with callback not work

[Thinker-as]

We need to update the option list when we change the value in another select field. Since updating the options of the original select does not trigger updating the options in the tomSelect, I try to initiate loading data from the server using the load () function by passing it the function receiving one argument (callback) as specified in the documentation, but there is no call to the passed function. what am I doing wrong?

import TomSelect from 'tom-select/dist/js/tom-select.complete';

let select = document.getElementById('select');
let anySelect = document.getElementById('anySelect');

let control = new TomSelect(select, {});
anySelect.addEventListener('input', (event) => {
    control.clear(false);
    control.clearOptions();
    control.load((callback) => {
        let url = select.dataset.dataUrl.replace(/__id__/, event.currentTarget.value);
        fetch(url)
            .then(response => response.json())
            .then(json => {
                callback(json);
            }).catch(() => {
            callback();
        });
    })
})

Thanks for any help!

[oyejorge]

Sorry, looks like the docs didn't get updated with an API change: the load() method takes a query string argument instead of a callback. I'll get that updated ASAP.

For your situation, I would do something like this:

import TomSelect from 'tom-select/dist/js/tom-select.complete';

let select = document.getElementById('select');
let anySelect = document.getElementById('anySelect');

let control = new TomSelect(select, {});
anySelect.addEventListener('input', (event) => {
    control.clear(false);
    control.clearOptions();
    let url = select.dataset.dataUrl.replace(/__id__/, event.currentTarget.value);
    fetch(url)
        .then(response => response.json())
        .then(json => {
            control.addOption(json);
        });
    })
})