[Bug]: Clarify how sync() works

[KES777]

Expected behavior

I am trying to resolve this issue: #855

But when I changed HTML: clear and add my custom options and called .sync() nothing is happened.

Steps to reproduce

let data =  {
  company: [ 8, 'XXXX' ],
  company_name: 'sdf',
}

let form =  $('form')[0];
debugger;
// This will create new .options for 'company' select element
FormDataJson.fromJson( form, data, { triggerChangeEvent: true, createNewOption: true } );
let select =  $('#tszz')[0].tomselect;
select.sync();
select.refreshItems();

Additional context

• OS: Linux Mint
• Browser FF
• Version 130
• Device: PC

Bug description

https://tom-select.js.org/docs/api/#sync

Synchronizes the Tom Select instance with the underlying select or input

It does not clear how it works.

1. TomSelect reads HTML and creates internal data structures to reflect this state
2. TomSelect removes any existing options from and creates fresh one from the internal state of TomSelect PS. I changed the order, because after numbered list the formatting is broken.

[KES777]

Furthermore sync() does not work if component was initialized like

new Autocomplete('#tszz',{
  valueField: 'id',
  labelField: 'name',
  ...

This happens because const settings = get_settings ? getSettings(self.input, { delimiter: self.settings.delimiter }) : self.settings; is called without manual parameters, thus getSettting fills text and value instead of configured name and id.

[KES777]

Ok. user_settings are honored only on line 117:

const settings = getSettings( input, user_settings );

and are ignored here:

const settings	= get_settings ? getSettings( self.input, {delimiter:self.settings.delimiter} as RecursivePartial<TomSettings> ) : self.settings;

during the call .sync().

[KES777]

I fixed the problem by changing the line in sync() to:

-const settings	= get_settings ? getSettings( self.input, {delimiter:self.settings.delimiter} as RecursivePartial<TomSettings> ) : self.settings;
+const settings	= get_settings ? getSettings( self.input, self.settings) : self.settings;

It looks good, except the selected option at is not reflected by TomSelect and the previous options are not cleared.

[karolyi]

I think I have the same bug.

I am modifying the underlying select element's options and then I sync() them but they don't appear in the order the select element shows it.

Not sure if this is intentional but quite sure it is bad and should reflect the select element's options order.