reset() functionality?

[John-Fratila]

I did:

• [ X] Search for if my issue has already been submitted
• [ X] Make sure I'm reporting something precise that needs to be fixed
• [ X] Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• [X ] Indicate precise steps to reproduce in numbers and the result,
  like below

When a form is reset, the fields on it are restored to their initial values. Is there a similar functionality in Selectize?

Steps to reproduce:

1. create a form with a select input with the following options: Empty Option (value=""), Option A ("a", selected), Option B ("b")
2. on form reset handler call the clear() function of the selectize
3. selectize the input
4. change the option to Option B
5. click form reset button

(I did not create a codepen because it fairly self-explanatory, I can do so if needed)

Expected result: the normal form reset functionality would be to select Option A, since that's what was selected at the time the page was loaded

Actual result: the clear() method clears the value (which is its expected behavior), so Empty Option is selected

What I'm trying to accomplish is closer to the form reset functionality. I realize I could have Option A be the empty value and then it would get selected by the clear() method, but the value has meaning for the back-end and I do not want to change business logic. Also, many times the initially selected value is dynamic, and it would be a hassle for the back-end to keep track of its initial state.

Also, I know I could call destroy() followed by selectize(), but that seems like a very inefficient way to deal with the issue.

Thoughts?

If there is no such functionality I am planning to implement it:

a reset() function that is very similar to the clear() function, including the boolean argument, but that sets the value to the original one instead of an empty one.

I'd like feedback if there is interest in me submitting a pull request with the change.

[mmplisskin]

You can use the events api to change the value of the select.
https://github.com/selectize/selectize.js/blob/master/docs/api.md

[John-Fratila]

Yes, I understand that I can set the value to anything I want, but using that would require me to always keep track of the original value when the form was loaded, which is not always the empty value.

What I need is a way to just tell the selectize control "I don't care which value was selected when you were initialized, just go back to that value". This is how form reset works, it does not clear the values in the fields (including select inputs), it resets the values to the ones that were in those inputs when the page was loaded.

Here's a scenario: there is a page where the user customizes an avatar (name, eye shape, color, hair, etc). Some of those fields are select inputs. When the user first creates the avatar, all of the fields are empty, so clicking the reset button after making some selections would clear all the values on the form.
However, once the user has entered values for the options and saved the avatar, then when they click "Edit", the page loads with the fields pre-filled in with the original values. If the user makes changes and then clicks reset, the fields are not cleared, the browser automatically resets the fields to their original values.

I need the same functionality for selectize controls. I realize that I could set the initial value as an attribute, and a lot of other things, so I could accomplish that, however I feel I shouldn't need to do so. Selectize.js already knows the original value, there should be a reset() method similar to the clear() method that accomplishes this.

[pmfederico]

Bump

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[makayabou]

bump.
tomselect implements a sync(), which resyncs data from underlying select.

[reformed]

One way to "reset" the selectize field is by destroying/reinitializing. You'd just need to move your init config into a function to avoid duplicate init code:

const $selectize = $('#selectize-field');
const initSelectize = $elem => {
    $elem.selectize({
        // your config
    });
};

initSelectize($selectize); // Initial config

// Reset functionality:
$selectize[0].selectize.destroy();
$('#form-with-selectize').trigger('reset');
initSelectize($selectize);