[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