Skip to content

[RAC] TabPanel shouldForceMount logs React error #7502

Description

@bradlc

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}?

https://github.com/facebook/react/blob/372ec00c0384cd2089651154ea7c67693ee3f2a5/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js#L323

💁 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

react-aria-components@1.5.0

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions