[BUG] - Using Tabs inside Modal breaks UI

[jrmylee]

HeroUI Version

2.6.14

Describe the bug

When a Modal containing Tabs is closed after switching between tabs, the modal's content remains visually present on the screen but in a "ghosted" state. This creates a UI layer that appears invisible but still occupies space and interferes with user interactions, as clicks are being intercepted by the invisible modal content.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Reproducible steps:

• Add 2 tabs inside a modal content component
• Open modal
• If tab 1 is selected, switch to tab 2
• Close modal
• The contents of the modal will still be on the screen, but not rendered(ghosted). So nothing will be clickable to the user, because the user is clicking the contents of the modal without knowing it.

Expected behavior

When the modal is closed, all of its content, including any tab components and their associated content, should be completely removed from both the DOM and visual layer. There should be no residual UI elements or invisible interactive areas remaining after the modal is closed.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-2038 [BUG] - Using Tabs inside Modal breaks UI

[wingkwong]

I couldn't reproduce the issue. Please share a sandbox.

issue4805.webm

[congnt148]

I also got the same error

[4Furki4]

I also got the same problem. Changing to the second tab and closing the modal make other elements unclickable. I noticed that the div opened for the modal in the react portal stays there even if the modal is closed.

[jmvie5]

Here is a reproduction of the issue

Fresh demo with react-router-v7, of course the UI is broken because of tailwind 4, but that's another issue.

In our app, we are still on tailwind 3, the bug with Modal was found when upgrading from Remix 2 to react-router-v7.

Video :

Enregistrement.de.l.ecran.2025-02-11.133922.mp4

[kulovecc]

I'm having the same problem and I think the internal components should be cleared after the Model is closed.