Overlay Component Issues : public method & events not working

[ajaypatelaj]

Hi @jahaganiev,

Thanks for creating such a wonderful library for TailwindCSS World.

We were eager to start our project with PrelineJS, but unfortunately, we're facing some issues with methods, events, and options as per the documentation.

Here is the example code link: https://stackblitz.com/edit/stackblitz-starters-efdd17?file=js%2Fmodal.js

Common

1. The first doubt us was, we whether should use data-hs-overlay="#hs-basic-modal" while using the JS Method to open and close the modal. As per your JS, we realize that the plugin finds the modal id from data-hs-overlay="#hs-basic-modal", according to that it becomes mandatory to use data-hs-overlay="#hs-basic-modal" even you are using JS open method.

Methods

1. Open item (public method) expecting modal as per the documentation, and it didn't work.

Then we tried using the button element node and it worked.

  const modal = new HSOverlay(document.querySelector('#hs-basic-modal'));
  modal.open();

2. Open item (static method) working as it should but again we have to use the attribute with button data-hs-overlay="#hs-basic-modal" which makes no purpose for using this method as it can also work by default with data-hs-overlay="#hs-basic-modal".
3. Open item (mixed) worked and the conclusion could be the same as point no 3.

Events

1. The events code doesn't seem working as per the docs

Then we tried this (getting instances as per the mixed method) and it seems to work.

Finally, this worked for us.

window.onload = function (e) {
const el = HSOverlay.getInstance('#hs-basic-modal', true).element;
  el.on('open', (instance) => {
    console.log('open-event', instance);
  });
  el.on('close', (instance) => {
    console.log('close-event', instance);
  });
};

But we don't know why we have to wrap it with a window.onload method as using document.addEventListener('DOMContentLoaded', () => {}); create an error like

Uncaught TypeError: Cannot read properties of undefined (reading 'find')

Also, we're facing almost similar issues with other components like collapsible, accordion, and dropdown as per the documentation.

Could you please let us know if are we using this method or event in the wrong way? Or something we need to improve in PrelineJS docs?

Cheers~