Fix #573

[kzkn]

Description

This PR fixes #573. It contains following fixes:

• Restores preset choices after destroy
• Loads preset choices only once for each choice after init

How Has This Been Tested?

E2E tests are added.

[jshjohnson]

Thanks for this - i've left some comments 👍

[perifer]

Tested this, and can confirm that it works in my app. Great job!

[franke-mc]

@jshjohnson: Maybe you can comment on the current status of this?

[perifer]

I'd love to see this resolved. Anything I can do to help?

[kzkn]

@jshjohnson re-review please?

[kzkn]

@jshjohnson
I had fixed new indicated items from you and a conflict with master branch.

Then, I have gotten a new ambiguity.
Should the Choices selection be reproduced in the original DOM after calling destroy?

<select>
<option selected>one</option>
<option>two</option>
<option>three</option>
</select>

<script>
const select = document.querySelector('select')
console.log(select.value) // => one
const choices = new Choices(select)
// select "two" on UI
choices.destroy()
console.log(select.value) // what?
</script>

How do you think it should work?

Thanks!

[jshjohnson]

Should the Choices selection be reproduced in the original DOM after calling destroy?

For a first pass I would say no. We can revisit this is people want to though. P.s. you have some conflicts!

[kzkn]

@jshjohnson

For a first pass I would say no. We can revisit this is people want to though.

Thanks! I got it.

P.s. you have some conflicts!

I have fixed.

[filip-jk]

@jshjohnson Can't wait for this to be released! Thanks!

[jshjohnson]

Could this be moved above line 186 please? That's where all the "preset" variables are defined

[kzkn]

Thanks! I have fixed.

[filip-jk]

@kzkn Thank you, Sir!

@jshjohnson Thank you, as well! Is there any chance to get this updated version on NPM? :)

[jshjohnson]

@filip-jk this has been released with 9.0.1 🎉 thanks @kzkn

[filip-jk]

@jshjohnson Ace, thanks!

[filip-jk]

@jshjohnson Sorry for bugging you about this but I think there is an issue with the destroy() method. It doesn't seem to pass the selected value?

I'm on 9.0.1 and let's say, the select I initialize Choices on has the selected value of "3". I destroy that Choices object and, unfortunately, the selected value on the tag is not "3". It gets "reset" I believe.

[jshjohnson]

That's expected @filip-jk #574 (comment)

[filip-jk]

@jshjohnson I'm confused. I'm initializing Choices on a select that has a selected value of "5". Choices take that selected value and I can see it in the rendered Choices dropdown menu. Once I destroy it, the select gets totally reset so it's not really the states the Choices was initialized on, right?

If that's expected than the description of the method is wrong:

"Kills the instance of Choices, removes all event listeners and returns passed input to its initial state."

It's not the initial state if the selected option/value is different.

[jshjohnson]

Yeah you're right, I would expect the originally selected option to persist. I'll investigate

[tagliala]

Hi, is it possible to reopen this issue? I'm experiencing the same issue described by @filip-jk

The use case is in a stimulus.js + turbo application, I will try to provide a reduced test case, but I'm going to describe it

1. Open a page with a Choices.js input with a selected value of 3
2. Go back in history (that will call destroy on the Choices.js instance)
3. Navigate forward to the page of Choices.js (that will trigger a init on the Choices.js instance)
4. I expect 3 to be selected, but the selection is lost