@mui/material 7.3.10 → 7.3.11

package/Autocomplete/Autocomplete.js

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useForcedRerendering = _interopRequireDefault(require("@mui/utils/useForcedRerendering"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
@@ -507,6 +509,46 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ...props,
     componentName: 'Autocomplete'
   });
+
+  // Re-render when anchorEl resizes so the Popper width stays in sync.
+  // Width is always read synchronously from anchorEl.clientWidth during render
+  // (no stale cached value). The hook just triggers a re-render on resize.
+  const forceRenderOnResize = (0, _useForcedRerendering.default)();
+  React.useEffect(() => {
+    if (!popupOpen || !anchorEl || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let lastWidth = anchorEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const newWidth = anchorEl.clientWidth;
+      if (lastWidth !== newWidth) {
+        lastWidth = newWidth;
+        forceRenderOnResize();
+      }
+    });
+    observer.observe(anchorEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [popupOpen, anchorEl, forceRenderOnResize]);
+
+  // When popupOpen becomes false, useAutocomplete returns [] for groupedOptions.
+  // Transitioned Poppers can remain mounted for their exit animation, so keep rendering
+  // the last open-state options instead of flashing "No options" or an empty Paper.
+  // These options are stale because they no longer reflect the hook's current
+  // groupedOptions, but they are non-interactive while closing and reset on next open.
+  const previousGroupedOptionsRef = React.useRef([]);
+  const prevPopupOpenRef = React.useRef(false);
+  const renderedOptions = popupOpen ? groupedOptions : previousGroupedOptionsRef.current;
+  (0, _useEnhancedEffect.default)(() => {
+    if (popupOpen && !prevPopupOpenRef.current) {
+      previousGroupedOptionsRef.current = [];
+    }
+    prevPopupOpenRef.current = popupOpen;
+    if (popupOpen && groupedOptions.length > 0) {
+      previousGroupedOptionsRef.current = groupedOptions;
+    }
+  }, [popupOpen, groupedOptions]);
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
@@ -580,13 +622,24 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     additionalProps: {
       disablePortal,
       style: {
-        width: anchorEl ? anchorEl.clientWidth : null
+        width: anchorEl ? anchorEl.clientWidth : null,
+        // Prevent interaction with stale cached options during exit transitions.
+        // The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
+        // rendered options would pass undefined to selectNewValue.
+        pointerEvents: popupOpen ? undefined : 'none'
       },
       role: 'presentation',
       anchorEl,
       open: popupOpen
     }
   });
+
+  // Don't render the Popper when there's no content to show.
+  // In freeSolo mode, "No options" text is suppressed, so if there are also no
+  // matching options and loading is false, the Paper would be empty.
+  // Uses renderedOptions (not groupedOptions) so Popper stays during exit transitions.
+  // Respect keepMounted from resolved popperProps (handles both object and callback slotProps forms).
+  const hasPopupContent = renderedOptions.length > 0 || loading || !freeSolo || popperProps.keepMounted === true;
   const [ClearIndicatorSlot, clearIndicatorProps] = (0, _useSlot.default)('clearIndicator', {
     elementType: AutocompleteClearIndicator,
     externalForwardedProps,
@@ -732,17 +785,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ...getInputProps()
         }
       })
-    }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    }), anchorEl && hasPopupContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
       as: PopperSlot,
       ...popperProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
+        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
+        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState: ownerState,
           role: "presentation",
@@ -751,10 +804,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
-          as: ListboxComponentProp,
+        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
           ...listboxProps,
-          children: groupedOptions.map((option, index) => {
+          children: renderedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
                 key: option.key,
@@ -787,12 +839,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   autoHighlight: _propTypes.default.bool,
   /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
+   * If `true`, the value is updated when the input loses focus under one of these conditions:
    *
-   * When using the `freeSolo` mode, the typed value will be the input value
-   * if the Autocomplete loses focus without highlighting an option.
+   * - An option highlighted via keyboard navigation or `autoHighlight` is selected.
+   *   Hover and touch highlights are ignored.
+   * - Otherwise, in `freeSolo` mode, the typed text becomes the value.
    * @default false
    */
   autoSelect: _propTypes.default.bool,

package/Button/Button.js

@@ -109,6 +109,17 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
+      style: {
+        '&::before': {
+          content: '"\\200b"',
+          width: 0,
+          overflow: 'hidden'
+        }
+      }
+    }, {
       props: {
         variant: 'contained'
       },
@@ -558,6 +569,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, {
     ownerState: ownerState,
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
@@ -569,7 +586,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.11
+
+<!-- generated comparing v7.3.10..v7.x -->
+
+_May 6, 2026_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@7.3.11`
+
+- [autocomplete] Fix highlight sync and scroll preservation (#48350) @mj12albert
+- [autocomplete] Fix popper rendering issues (#48343) @mj12albert
+- [autocomplete] Improve highlight tracking and selection state (#48318) @mj12albert
+- [button] Fix `startIcon` alignment (#48339) @mj12albert
+- [button] Remove duplicated className entries (#48284) @silviuaavram
+- [checkbox] Set `aria-checked=mixed` when indeterminate (#48286) @mj12albert
+- [dialog][drawer][focus trap] Fix initial focus target (#48324) @mj12albert
+- [drawer] Fix transition jump (#48340) @mj12albert
+- [input] Fix layout shift with display: flex (#48359) @oliviertassinari
+- [inputs] Fix autofocus in SSR environment (#48307) @mj12albert
+- [popper] Persist positioning styles when popperOptions changes reference (#48302) @mj12albert
+- [switch] Fix incorrect `role` with `slotProps.input` (#48472) @mj12albert
+- [utils] Add shadow dom utils (#48309) @mj12albert
+
+### Docs
+
+- [docs] Update banner to announce v9 (#48299) @siriwatknp
+- [docs] Add v9 in the versions select in v7.mui.com (#48233) @alexfauquette
+
+### Core
+
+- [internal] Update some host-reference entries (#48225) @silviuaavram
+
+All contributors of this release in alphabetical order: @alexfauquette, @mj12albert, @oliviertassinari, @silviuaavram, @siriwatknp
+
 ## 7.3.10
 
 <!-- generated comparing v7.3.9..v7.x -->

package/Checkbox/Checkbox.js

@@ -159,7 +159,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/ClickAwayListener/ClickAwayListener.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _contains = _interopRequireDefault(require("@mui/utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -90,11 +91,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !(0, _contains.default)(doc.documentElement, event.target) || (0, _contains.default)(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);

package/Dialog/Dialog.js

@@ -23,6 +23,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
@@ -301,7 +302,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: (0, _clsx.default)(classes.paper, PaperProps.className)
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [_focusable.FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = (0, _useSlot.default)('container', {
     elementType: DialogContainer,
@@ -345,11 +355,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.default.Provider, {
             value: dialogContextValue,

package/Drawer/Drawer.js

@@ -23,8 +23,10 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _drawerClasses = require("./drawerClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
@@ -217,9 +219,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -251,7 +259,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: (0, _clsx.default)(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -262,6 +270,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -284,13 +293,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [_focusable.FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: (0, _clsx.default)(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -304,7 +315,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === _Slide.default) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {

package/Fab/Fab.js

@@ -194,6 +194,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
@@ -203,7 +209,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/InputBase/InputBase.js

@@ -25,10 +25,14 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _utils = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputGlobalStyles;
+const MUI_AUTO_FILL = 'mui-auto-fill';
+const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -193,11 +197,11 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: 'mui-auto-fill-cancel',
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: '10ms',
         '&:-webkit-autofill': {
           animationDuration: '5000s',
-          animationName: 'mui-auto-fill'
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -228,14 +232,16 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
   };
 }));
 const InputGlobalStyles = (0, _zeroStyled.globalCss)({
-  '@keyframes mui-auto-fill': {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL
     }
   },
-  '@keyframes mui-auto-fill-cancel': {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -351,6 +357,32 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       });
     }
   }, [value, checkDirty, isControlled]);
+
+  // Sync focused state when autoFocus is used in SSR.
+  // If the browser focused the element before hydration, the onFocus handler never
+  // fires. If it did not, React hydration does not call focus() for autoFocus.
+  (0, _useEnhancedEffect.default)(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = (0, _ownerDocument.default)(input);
+    const activeElement = (0, _getActiveElement.default)(doc);
+    const noElementFocused = activeElement == null || activeElement === doc.body || activeElement === doc.documentElement;
+    if (input === activeElement) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus]);
   const handleFocus = event => {
     if (onFocus) {
       onFocus(event);
@@ -439,7 +471,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: 'x'
     });
   };

package/ListItemButton/ListItemButton.js

@@ -172,6 +172,12 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     selected
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const handleRef = (0, _useForkRef.default)(listItemRef, ref);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
     value: childContext,
@@ -185,7 +191,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
       ...other,
-      classes: classes,
+      classes: forwardedClasses,
       children: children
     })
   });

package/MenuItem/MenuItem.js

@@ -213,6 +213,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   };
   const classes = useUtilityClasses(props);
   const handleRef = (0, _useForkRef.default)(menuItemRef, ref);
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   let tabIndex;
   if (!props.disabled) {
     tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
@@ -228,7 +233,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       className: (0, _clsx.default)(classes.root, className),
       ...other,
       ownerState: ownerState,
-      classes: classes
+      classes: forwardedClasses
     })
   });
 });

package/Popper/BasePopper.js

@@ -150,8 +150,30 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       modifiers: popperModifiers
     });
     handlePopperRefRef.current(popper);
+    const popperElement = tooltipRef.current;
     return () => {
-      popper.destroy();
+      // popper.destroy() clears all inline positioning via the applyStyles
+      // modifier cleanup, which causes the element to jump to its static
+      // position. Snapshot and restore only the positioning properties so the
+      // element stays in place during the destroy/recreate gap (prevents scroll
+      // jumps when a child focuses between the two).
+      // https://github.com/mui/mui-x/issues/21839
+      if (popperElement) {
+        const {
+          style
+        } = popperElement;
+        const position = style.position;
+        const top = style.top;
+        const left = style.left;
+        const transform = style.transform;
+        popper.destroy();
+        style.position = position;
+        style.top = top;
+        style.left = left;
+        style.transform = transform;
+      } else {
+        popper.destroy();
+      }
       handlePopperRefRef.current(null);
     };
   }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);

package/Slider/useSlider.js

@@ -20,6 +20,8 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _areArraysEqual = _interopRequireDefault(require("../utils/areArraysEqual"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 function getNewValue(currentValue, step, direction, min, max) {
   return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
@@ -99,8 +101,8 @@ function focusThumb({
   activeIndex,
   setActive
 }) {
-  const doc = (0, _ownerDocument.default)(sliderRef.current);
-  if (!sliderRef.current?.contains(doc.activeElement) || Number(doc?.activeElement?.getAttribute('data-index')) !== activeIndex) {
+  const activeElement = (0, _getActiveElement.default)((0, _ownerDocument.default)(sliderRef.current));
+  if (!(0, _contains.default)(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
   }
   if (setActive) {
@@ -357,7 +359,8 @@ function useSlider(parameters) {
     otherHandlers?.onKeyDown?.(event);
   };
   (0, _useEnhancedEffect.default)(() => {
-    if (disabled && sliderRef.current.contains(document.activeElement)) {
+    const activeElement = (0, _getActiveElement.default)((0, _ownerDocument.default)(sliderRef.current));
+    if (disabled && (0, _contains.default)(sliderRef.current, activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js

package/SwipeableDrawer/SwipeableDrawer.js

@@ -14,10 +14,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _NoSsr = _interopRequireDefault(require("../NoSsr"));
 var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -299,7 +300,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
-    if (open && paperRef.current.contains(nativeEvent.target) && claimedSwipeInstance === null) {
+    if (open && (0, _contains.default)(paperRef.current, nativeEvent.target) && claimedSwipeInstance === null) {
       const domTreeShapes = getDomTreeShapes(nativeEvent.target, paperRef.current);
       const hasNativeHandler = computeHasNativeHandler({
         domTreeShapes,
@@ -397,7 +398,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
 
     // At least one element clogs the drawer interaction zone.
-    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
+    if (open && (hideBackdrop || !(0, _contains.default)(backdropRef.current, nativeEvent.target)) && !(0, _contains.default)(paperRef.current, nativeEvent.target)) {
       return;
     }
     const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
@@ -409,7 +410,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (0, _contains.default)(paperRef.current, nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/Switch/Switch.js

@@ -20,6 +20,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
+var _utils = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -232,6 +233,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const externalInputProps = slotProps.input;
   const externalForwardedProps = {
     slots,
     slotProps
@@ -285,11 +287,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
         ...(slotProps.switchBase && {
           root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
         }),
-        input: {
+        input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
           role: 'switch'
-        },
-        ...(slotProps.input && {
-          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
         })
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, {