Closed
Description
Provide a general summary of the issue here
Using shouldForceMount
with <TabPanel>
logs a React error.
🤔 Expected Behavior?
Using shouldForceMount
should not log an error.
😯 Current Behavior
React logs the following 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}?
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://stackblitz.com/edit/stackblitz-starters-yvbwhznr?file=app%2FClient.tsx
'use client';
import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components';
export function Client() {
return (
<Tabs>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR">Founding of Rome</Tab>
<Tab id="MaR">Monarchy and Republic</Tab>
<Tab id="Emp">Empire</Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR" shouldForceMount>
Senatus Populusque Romanus.
</TabPanel>
<TabPanel id="Emp">Alea jacta est.</TabPanel>
</Tabs>
);
}
Version
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
macOS 15.1.1
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response