.addOption and setValue duplicates option on origin select

[martinbarilik]

I do not know if this is expected behavior, but if it is i can't use it.

The example shows my use-case. On a certain selectbox i need to append another SB with data attributes of origin. No idea if there is a cleaner way but this works partially for me. The problem appears when i am trying to get a data attribute of a selected appended option.

The selected option is appended automatically i think but it duplicates already added option by hand. So in time of need i have two options with the same value and automatically appended option is missing my data attributes.

Any way i can remove it ? I am open to any suggestion. These workarounds are pain for me :D

https://jsfiddle.net/mArtinko5MB/y1L845xa/78/

[oyejorge]

A couple of things going on in your code that I'll note below

    // addOption() wasn't designed  to take an <option> element as an argument, it works but you're better off just passing data
    getterSb.tomselect.addOption(new Option(cal, cal));  // instead, do: getterSb.tomselect.addOption({value:cal,text:cal});

    getterSb.tomselect.refreshOptions(false);
    
    // Tom Select has already created an <option> for cal at this point and now you're creating a duplicate
    let newOption = new Option(cal, cal); // try newOption =  getterSb.tomselect.getOption(cal) instead
    newOption.dataset.calVal = selectedOption.dataset.calVals.split(',')[index];

[martinbarilik]

Can you explain a bit why is this working ? I did not find anything in docs for HTMLEvents

[martinbarilik]

I just spotted a bit of a bug in your fiddle. If you set 1st select, second gets set with 'a', but when you click on 2nd selectbox you do not see options available.

To see options i need to backspace the a value.

Its like a random behaviour which i can simulate 100 % of the times when i click into 2nd selecbox before clicking on 1st and set the option.

Sometimes when i crtl+shift+R the page and click right into 1st selecbox, set the value, 2nd box is showing all options. Weird

[oyejorge]

You're setting up TomSelect on the 2nd selectbox before there are any options. Then, you're adding <option> tags and want the TomSelect instance to update. It's a perfect use case for the change_listener plugin and just needed the change event.

To see options i need to backspace the a value.

Hmm, I think I know what's happening there. The inputValue hasn't changed so the dropdown content isn't regenerated even though the change_listener plugin has added options.

[oyejorge]

... ok it's not the inputValue, it's lastQuery. Here's an example that doesn't have the bug

[martinbarilik]

Oh, i completely missed out the plugins key on 2nd line. Now i get it, nice :) thanks

just to be sure, without the plugin change event doesn't do anything to tomselect element, right?