Teleport feature not working as expected
I'm trying to use teleportTarget with a specific target (a div with id) instead of plain html tags. However, I found some issue:
1. when passed with custom selector, vue multiselect throws error (seems like it cannot find the target, or cannot teleport for some reason).
This does not happen when target selector is just plain html tag (example: body, a, div, instead of #teleId). Haven't checked if passed html object ref.
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
2. anomaly happens when toggling useTeleport on and off. The "offset" of the option menu seemed to be stuck to the teleported version.
If without teleport the offset is 30px top and 0px left, and when teleported it changed to 100px top and 0 px left, if I disabled the teleport and reopen the popper, i would expect it to revert back to 30px left and 0px top, but instead is still uses the 100px top and 0px left, causing huge gap between the select and the popper.
I assumed that no.1 happened due to race condition in rendering since teleport requires target to exist before attempting to teleport, otherwise it will throw error. Deferring useTeleport to true in onMounted in the stackblitz repro makes it work with #id selector, even though the target element is not conditionally rendered and always exist in the template.
Repro:
https://stackblitz.com/edit/vitejs-vite-zvbsc2sz?file=src%2FApp.vue
Source: shentao/vue-multiselect