baseweb
baseweb copied to clipboard
<StatefulTabs /> (motion) crashes if any child is null or falsey
<StatefulTabs />
(motion) will crash if a tab is rendered conditionally as one of its children, while <Tabs />
doesn't have the same limitation.
- Desired
<Tabs />
codesandbox
export default () => {
const [activeKey, setActiveKey] = React.useState("0");
return (
<Tabs
activeKey={activeKey}
onChange={({ activeKey }) => {
setActiveKey(activeKey);
}}
activateOnFocus
>
{null}
<Tab key="0" title="First">
Content 1
</Tab>
<Tab key="1" title="Second">
Content 2
</Tab>
<Tab key="2" title="Third">
Content 3
</Tab>
</Tabs>
);
};
- Buggy
<StatefulTabs />
codesandbox
export default () => {
return (
//TypeError
// Cannot read properties of null (reading 'key')
// eval
// eval
// mapIntoArray
// mapIntoArray
// Object.mapChildren [as map]
<StatefulTabs activateOnFocus>
{null}
<Tab key="0" title="First">
Content 1
</Tab>
<Tab key="1" title="Second">
Content 2
</Tab>
<Tab key="2" title="Third">
Content 3
</Tab>
</StatefulTabs>
);
};
Current Behavior
If a Tab
child is rendered conditionally in a StatefulTabs
, so that the child is null
or false
(at least on initial render) then an error is thrown:
function Example({ details }) {
return <StatefulTabs>
{details && (
<Tab title="Details">
<ShowDetails details={details} />
</Tab>
)}
<Tab title="Always">
<SomethingAlwaysThere />
</Tab>
</StatefulTabs>
}
error:
TypeError: Cannot read properties of null (reading 'key')
at StatefulTabs (webpack-internal:///../../node_modules/baseui/esm/tabs-motion/stateful-tabs.js:137:24)
Tabs
does not throw an error in this case.
Expected Behavior
StatefulTabs
should skip falsey children like null
or false
in the same way that Tabs
does, so that conditional rendering can work as expected.
Your Environment
Tech | Version |
---|---|
Base UI | v10.12.1 |
React | 18.0.0 |
browser | Chrome |
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
I believe the error originates from this line https://github.com/uber/baseweb/blob/master/src/tabs-motion/stateful-tabs.js#L20 Would you like to look into a fix?