[BUG] - Tabs with prop destroyInactiveTabPanel error

[stefnto]

NextUI Version

2.4.8

Describe the bug

I'm using the Tabs component with the prop destroyInactiveTabPanel={false} and when the page that contains the tabs opens I get the error

Received the string `true` for the boolean attribute `inert`. Although this works, it will not work as expected if you pass the string "false". Did you mean inert={true}? Error Component Stack
    at div (<anonymous>)
    at NextUI.TabPanel (chunk-MGHLJVLI.mjs:24:13)

only on development mode. On production the error doesn't even show. Removing the prop fixes the error, but I need the inactive tab to not be destroyed, so I need to use the prop.

Your Example Website or App

https://github.com/stefnto/typescript-project

Steps to Reproduce the Bug or Issue

Code is on app/page.tsx so you just navigate to localhost:3000 after opening the dev server

Expected behavior

This error shouldn't show.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-1511 [BUG] - Tabs with prop destroyInactiveTabPanel error

[stefnto]

I did a bit of digging on the component code and I think the problem is on this file
https://github.com/nextui-org/nextui/blob/canary/packages/components/tabs/src/tab-panel.tsx
line 72 should be
inert={!isSelected ? true : undefined}
without the quotation marks on true

[ShrinidhiUpadhyaya]

Hi @wingkwong, can i work on this?

[wingkwong]

@ShrinidhiUpadhyaya assigned. please take a look how react-aria works on this part. I remember this logic is from there. Or please check the historical PR to see if someone changed that and the reason behind.