Could not open HSOverlay using public method (Javascript)

[vkgautham]

I am working with Htmx and Preline UI and having trouble with HSOverlay. I have the following code and is not working as expected. modal.open() is not showing the modal but when I toggle the hidden and open classes directly on the modal <div> the overlay is shown. However in this way, I am not able to add backdrop classes, transitions etc.,

Any idea, what I am doing wrong?

Thanks

addEventListener("htmx:afterSettle", () => {
    const modal = new HSOverlay(document.querySelector('#hs-basic-modal'));
    const overlay = document.querySelector("#hs-basic-modal");
    const openBtn = document.querySelector('[data-hs-overlay]');

    openBtn.addEventListener('click', () => {

        //**this working**
        overlay.classList.remove("hidden");
        overlay.classList.add("hs-overlay-backdrop-open:bg-blue-900/[.5]")  // but backdrop is not visible
        overlay.classList.add("open");
        console.log('...');

        //**this is not working**
        modal.open();
    });
});

I have the following in my tailwind config file.

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    darkMode: "class",
    content: [
        "./templates/**/*.html",
        "./node_modules/preline/dist/*.js",       
    ],
    theme: {
        container: {
            center: true,
            padding: '2rem',
        },
        extend: {
            fontFamily: {
                sans: ["Inter var", ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('preline/plugin'),        
        function ({ addVariant }) {
            addVariant("peer-group-checked", ".peer:checked ~ .peer-group &"),
                addVariant(
                    "peer-group-required",
                    ".peer:required ~ .peer-group &"
                ),
                addVariant("peer-group-valid", ".peer:valid ~ .peer-group &");
        },
    ],
};

[hieuhuynh93]

Try this

import {HSOverlay} from 'preline/preline'

addEventListener("htmx:afterSettle", () => {
    const openBtn = document.querySelector('button_you_want_to_click');
    openBtn.addEventListener('click', () => {
        HSOverlay.open('#hs-basic-modal');
    });
});

[jahaganiev]

@vkgautham have you tried @hieuhuynh93's suggestions for the workaround? Please do let us know if you still having the issue.

[pranavpremarajan]

import {HSOverlay} from 'preline/preline';

// Inside the component

 const handleOpenButtonClick = () => {
    HSOverlay.open("#modal-id");
  };

<button onClick={handleOpenButtonClick}>open</button>

[cquinoneso]

import {HSOverlay} from 'preline/preline';

// Inside the component

 const handleOpenButtonClick = () => {
    HSOverlay.open("#modal-id");
  };

<button onClick={handleOpenButtonClick}>open</button>

shows an error when pressing the button again to open the modal

[ginalsyah]

this is not working