Don't remove original DOM node

[syropian]

Frameworks like Vue.js rely on certain DOM nodes to not be removed by third-party code to work properly. (See vuejs/vue#3302). I think simply hiding the original DOM node would be a better option here. Thoughts?

[jshjohnson]

I'm not sure about this - this was a design decision I made early on based on performance concerns. Although it's unlikely, a user could potentially add and remove as many items as they wish (unless it's a single select box) meaning the DOM could get needlessly large. I would be interested to see what performs better: moving the element entirely or hiding it.

[syropian]

Can't really speak for performance, but it would also simplify the destroy() method (which I noticed wasn't in the docs 😉 ) as you don't have to shift around a bunch of markup, just unhide the original el, and nuke the generated stuff.

I'd love to write a Vue wrapper for this, but at the moment, it just doesn't work, due to the way it touches the original DOM node.

[jshjohnson]

So if I was to test this with hidden elements instead would that need to
apply to everything (choices, items, groups and hidden select options)?

On an aside, thanks for the heads up - I'm updating the docs now!

[syropian]

Hm, maybe I miscommunicated what I meant. I just meant hide the original element you pass into the constructor, with display:none; as opposed to removing it from the DOM.

[jshjohnson]

Oh sorry! In that case, the original element is already set to display: none;. See the screenshot below:

[syropian]

Ah ok, so I think it's still a problem as it wraps the source element, instead of appending all the generated DOM adjacent to it. I don't have a deep understanding of how Vue's internal update system works but Evan (creator of it) said:

Vue's update algorithm is built upon the assumption that the DOM structure is not to be altered by arbitrary 3rd party code.

As a workaround instead of not wrapping it you could clone it, so you have both a wrapped element for easier selector referencing internally, but there'd still be an untouched version of it as well (besides it being hidden). Sorry if that's confusing. I could maybe create a PR to show you what I mean.

[jshjohnson]

Hmmm, the beauty of wrapping the original element is that you can query for it from the outer container rather than querying the whole document. Looking for adjacent elements is possible but seems awkward to me - especially as I'm looking for ways to trigger the normal select box on mobile so would need the original element contained.