Skip to content

[RAC] TabPanel shouldForceMount logs React error #7502

Closed
@bradlc

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

[email protected]

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions