Advanced select Cannot read properties of undefined (reading 'push')

[gutig]

Summary

Advanced select Cannot read properties of undefined (reading 'push')

Steps to Reproduce

There is an error when trying to load the HSSelect manually via vanilla javascript, first I thought this was via stimulus js but it happens without that too, so this is what I'm doing

import HSSelect from "@preline/select";
new HSSelect(document.querySelector('#myselecttwo'))

but this gives me this error;

Uncaught TypeError: Cannot read properties of undefined (reading 'push') at t.createCollection (index.js:1:1591) at e.init (index.js:9:6542) at new e (index.js:9:3767) at HTMLDocument. (app.js:8:5)

I then add a DOMContentLoaded and try it that way e.g.

import HSSelect from "@preline/select";

document.addEventListener("DOMContentLoaded", function () {
    console.log('here...')
    new HSSelect(document.querySelector('#myselecttwo'))
})

I then get the exact same error, the only way I've managed to get this to work is as follows;

import HSSelect from "@preline/select";

observeDOM()

function observeDOM() {
    const observer = new MutationObserver((mutationsList, observer) => {
        const element = document.querySelector('#myselecttwo');
        if (element) {
            initSelect(element);
            observer.disconnect();
        }
    });
    observer.observe(document.body, {childList: true, subtree: true});
}

function initSelect(element) {
        new HSSelect(element)
}

There has to be some bug internally that is causing this? Or have I got my setup wrong? I've got a basic setup of tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'media',
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
    './node_modules/preline/dist/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('preline/plugin'),
    require('@tailwindcss/forms'),
  ],
}

Demo Link

https://stackblitz.com/edit/vitejs-vite-mt7hpx?file=main.js

Expected Behavior

new HSSelect(element) should load the advanced select

Actual Behavior

should load without any errors, it should at least not need the complicated structure as explained

Screenshots

No response

[gutig]

It appears that this happens when you don't include this within the javascript;

window.HSStaticMethods.autoInit(['select']);

I don't think this is made very clear in your documentation to be honest https://preline.co/docs/preline-javascript.html

this is the docs description of the method;

Preline JavaScript plugins include autoInit static method, it's useful when you need to reinitialize all elements on the page.

window.HSStaticMethods.autoInit();

This method can also be used with certain collections of initialized elements.

window.HSStaticMethods.autoInit(['carousel', 'dropdown']);

I wouldn't have assumed in anyway that if I don't use that then I can't manually initalize it via javascript, hopefully you would agree that this could be made much clearer to the user ?

[jahaganiev]

Hey @gutig - yes, the docs could be definitely improved!

Do you have any suggestions to make them clearer?

Cheers!