htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Help wanted: cannot programatically close HSCollapse #501

Open RSchmitzHH opened 1 week ago

RSchmitzHH commented 1 week ago

Hi all!

I am trying to programatically close a HSCollapse. I keep getting an error from inside the hide() function:

TypeError: Cannot read properties of null (reading 'style')
    at Proxy.hide (preline.js?v=8b009ed9:1954:18)

My minimal example is:

<script setup>
onMounted(async () => {
  setTimeout(() => {
    HSCollapse.autoInit();
  }, 200);

  menuMobile.value = new HSCollapse(document.getElementById('navbar-collapse-with-animation'));

  console.log('menuMobile', menuMobile.value);  // logs: see below
});

const closeMenu = () => {
  menuMobile.value?.hide();
};

</script>
....

<template>
    <button
        type="button"
        class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800"
        data-hs-collapse="#navbar-collapse-with-animation"
        aria-controls="navbar-collapse-with-animation"
        aria-label="Toggle navigation"
    >
    toggle
    </button>

      <div
          id="navbar-collapse-with-animation"
          class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block"
      >
              <div class="overflow-hidden overflow-y-auto max-h-[75vh] scrollbar-y">
              contents
              </div>
      </div>
</template>

Log from menuMobile:

Proxy(_HSCollapse) {el: div#navbar-collapse-with-animation.hs-collapse.hidden.overflow-hidden.transition-all.duration-300.b…, options: undefined, events: {…}, contentId: undefined, content: null, …}
[[Handler]]
: 
MutableReactiveHandler
[[Target]]
: 
_HSCollapse
[[IsRevoked]]
: 
false

Can somebody spot what I am doing wrong? Why do I get an error from inside preline's hide() function?

Many thanks in advance!