When I Open a modal in my website and I click back button of the browser, the black background still shown on the previous page.

[ahmedkhabar]

I'm using nextJs with JavaScript and app routes

[jahaganiev]

Doesn't seem it's related to Preline plugins. You may check out the js methods for "Close" here https://preline.co/plugins/html/overlay.html#js-methods

[ahmedkhabar]

I'm using next-js, that's mean we can go back without refreshing the website so that's why the modal stay and in you website gone.

…

Message ID: ***@***.***>

[bluefire2121]

@jahaganiev @ahmedkhabar, I don't believe this is closed. What's the recommended way to close the backdrop in SSR frameworks like NextJS or Remix?

[cglacet]

I also suspect there is a bug here, the backdrop is not always properly removed, in my case it happens when closing the modal while "navigating" (client side navigation) to another page. I'm using Vite and tanstack router.

The naive button code (which never remove the backdrop if onClose navigates to another page:

<ModalValidateButton onClick={props.onClose} type="button" data-hs-overlay={`#${modalId}`}>
    Validate
</ModalValidateButton>

I managed to reduce the occurences of that bug by delaying the navigation:

<button onClick={() => setTimeout(props.onClose, 100)}  type="button" data-hs-overlay={`#${modalId}`}>
    Validate
</ModalValidateButton>

I suspected this might be because of the type of my props.onClose function, so I changed it to a promise, it doesn't seem to make a difference.

I found a solution that works for me, but I had to do everything manually (notice I removed the modal ID here):

<button
    type="button"
    onClick={() => {
        const modalEl = document.querySelector(`#${props.modalId}`) as HTMLElement | undefined;
        if (modalEl) {
            HSOverlay.on('close', modalEl, props.onClose);
            HSOverlay.close(modalEl);
        }
    }}
>
    Validate
</button>

This is slow because we wait for the dropdown to be completely closed to load the next page's DOM. But it works consistently at least.

Where is the bug?

I have no idea.

While researching I also found there seems to be a type issue in the definition:

export declare class HSOverlay extends HSBasePlugin<{}> implements IOverlay {
	close(): Promise<unknown>;
	static close(target: HTMLElement): void;
}

The close method is marked a async but it's not, if you write await modal.close() it never resolve.
The static version seems to be properly typed. I guess this might also lead to the bug.