u

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 (
       <Box sx={sx}>
@@ -183,19 +182,7 @@ export class TabbedPanelTileGrid extends Component {
           </Tabs>
         </Box>
 
-        {tabs.map((tab) => {
+        {activeTab ? React.cloneElement(activeTab.child, { key: String(activeTab.value) }) : null}
-          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' }),
-            },
-          });
-        })}
       </Box>
     );
   }