diff --git a/src/panels/TabbedPanelTileGrid.jsx b/src/panels/TabbedPanelTileGrid.jsx index b72d218..fe7913f 100644 --- a/src/panels/TabbedPanelTileGrid.jsx +++ b/src/panels/TabbedPanelTileGrid.jsx @@ -35,7 +35,6 @@ import Tabs from '@mui/material/Tabs'; * @prop {any} [defaultValue] - Initial active tab value/index for uncontrolled mode. * @prop {any} [defaultTab] - Alias for defaultValue. * @prop {(nextValue: any, event: React.SyntheticEvent) => void} [onChange] - Called on tab switch. - * @prop {boolean} [keepMounted=true] - When true, inactive grids remain mounted in DOM with `display: none` to preserve scroll, refs, and sortable states. * @prop {object} [sx] - Extra styles merged into root container Box. * @prop {object} [tabsWrapperSx] - Extra styles for the container around Tabs. * @prop {object} [tabsSx] - Extra styles merged into MUI Tabs. @@ -99,7 +98,6 @@ export class TabbedPanelTileGrid extends Component { render() { const { - keepMounted = true, sx, tabsWrapperSx, tabsSx, @@ -110,6 +108,7 @@ export class TabbedPanelTileGrid extends Component { if (tabs.length === 0) return null; const activeValue = this.getActiveValue(tabs); + const activeTab = tabs.find((t) => t.value === activeValue) ?? tabs[0]; return ( @@ -183,19 +182,7 @@ export class TabbedPanelTileGrid extends Component { - {tabs.map((tab) => { - const isSelected = tab.value === activeValue; - if (!isSelected && !keepMounted) { - return null; - } - return React.cloneElement(tab.child, { - key: String(tab.value), - sx: { - ...tab.child.props.sx, - ...(isSelected ? {} : { display: 'none !important' }), - }, - }); - })} + {activeTab ? React.cloneElement(activeTab.child, { key: String(activeTab.value) }) : null} ); }