How can I update tom-select to reflect changes in an underlying HTML select element?

Question

I have an html select at which tom-select is initialized. At some user action a selection of the html select is changed from code - an option element is added and the value of a select is set. I cannot force the tom-select to reflect that state.

I tried to use different combinations of API calls: sync, clear + addItem, setValue but didn't manage to get the result I want. On the other hand, if the raw select has the option and value set before TomSelect is created it works as I would like - the label from the selected option is also selected and visible in TomSelect. Calling destroy clear the HTML options so re-creating is not straightforward.

Here is a reproducible sample - https://codepen.io/BDomzalski/pen/abRXoRY

Answer 1

Found the cause of the issue in the examplary code - I used label property of the HTMLOptionElement while TomSelect uses textContent.

My problem from the real code was different - it was because of non-default value of labelField setting. Reported an issue.