Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Clarify how sync() works #856

Open
KES777 opened this issue Jan 9, 2025 · 3 comments
Open

[Bug]: Clarify how sync() works #856

KES777 opened this issue Jan 9, 2025 · 3 comments
Labels
bug Something isn't working

Comments

@KES777
Copy link

KES777 commented Jan 9, 2025

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 KES777 added the bug Something isn't working label Jan 9, 2025
@KES777
Copy link
Author

KES777 commented Jan 9, 2025

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
Copy link
Author

KES777 commented Jan 9, 2025

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
Copy link
Author

KES777 commented Jan 9, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant