@mui/material 9.0.0 → 9.0.1

package/NativeSelect/NativeSelect.mjs

@@ -5,8 +5,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import NativeSelectInput from "./NativeSelectInput.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.mjs";
 import Input from "../Input/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -40,10 +39,8 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     variant,
     ...other
   } = props;
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs] = useFormControlState({
     props,
-    muiFormControl,
     states: ['variant']
   });
   const ownerState = {

package/OutlinedInput/OutlinedInput.js

@@ -12,8 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NotchedOutline = _interopRequireDefault(require("./NotchedOutline"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -134,26 +133,19 @@ const OutlinedInputInput = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {
   theme
 }) => ({
   padding: '16.5px 14px',
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -201,10 +193,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     ...other
   } = props;
   const classes = useUtilityClasses(props);
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs, muiFormControl] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
   const ownerState = {

package/OutlinedInput/OutlinedInput.mjs

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import NotchedOutline from "./NotchedOutline.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
@@ -127,26 +126,19 @@ const OutlinedInputInput = styled(InputBaseInput, {
   theme
 }) => ({
   padding: '16.5px 14px',
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -194,10 +186,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     ...other
   } = props;
   const classes = useUtilityClasses(props);
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs, muiFormControl] = useFormControlState({
     props,
-    muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
   const ownerState = {

package/PigmentContainer/PigmentContainer.js

@@ -59,7 +59,6 @@ const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer
     fixed: fixed,
     maxWidth: maxWidth,
     ...props,
-    // @ts-ignore
     ref: ref
   });
 });

package/PigmentContainer/PigmentContainer.mjs

@@ -51,7 +51,6 @@ const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer
     fixed: fixed,
     maxWidth: maxWidth,
     ...props,
-    // @ts-ignore
     ref: ref
   });
 });

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/Popper/BasePopper.mjs

@@ -143,8 +143,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/Select/Select.js

@@ -14,8 +14,7 @@ var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _NativeSelectInput = _interopRequireDefault(require("../NativeSelect/NativeSelectInput"));
@@ -78,10 +77,8 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     ...other
   } = props;
   const inputComponent = native ? _NativeSelectInput.default : _SelectInput.default;
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;

package/Select/Select.mjs

@@ -7,8 +7,7 @@ import deepmerge from '@mui/utils/deepmerge';
 import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.mjs";
 import Input from "../Input/index.mjs";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.mjs";
@@ -71,10 +70,8 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     ...other
   } = props;
   const inputComponent = native ? NativeSelectInput : SelectInput;
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs] = useFormControlState({
     props,
-    muiFormControl,
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;

package/Select/SelectInput.js

@@ -15,12 +15,15 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _Menu = _interopRequireDefault(require("../Menu/Menu"));
 var _NativeSelectInput = require("../NativeSelect/NativeSelectInput");
 var _utils = require("../InputBase/utils");
 var _zeroStyled = require("../zero-styled");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
+var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
@@ -28,6 +31,37 @@ var _utils2 = require("./utils");
 var _SelectFocusSourceContext = require("./utils/SelectFocusSourceContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
+const OPENING_MOUSE_UP_BOUNDARY_OFFSET = 2;
+// The initial mouseup may land on an item when the menu opens over the trigger.
+const SELECTED_MOUSE_UP_DELAY = 400;
+const UNSELECTED_MOUSE_UP_DELAY = 200;
+
+/**
+ * Returns true when a native mouse event should be treated as happening inside
+ * the element, even if a portal or backdrop retargeted the event away from it.
+ *
+ * Select uses this for the opening mouseup: when the menu opens over the
+ * trigger, the release can target the backdrop or portaled menu even though the
+ * pointer is still inside the trigger or menu bounds.
+ */
+function isMouseEventInsideElement(event, element) {
+  if (!element) {
+    return false;
+  }
+  const eventPath = event.composedPath();
+  if (eventPath.includes(element)) {
+    return true;
+  }
+  if (event.target?.nodeType && element.contains(event.target)) {
+    return true;
+  }
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    // Hidden or transition-mounted elements do not have useful bounds to hit-test.
+    return false;
+  }
+  return event.clientX >= rect.left - OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientX <= rect.right + OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientY >= rect.top - OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientY <= rect.bottom + OPENING_MOUSE_UP_BOUNDARY_OFFSET;
+}
 const SelectSelect = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
@@ -154,6 +188,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
+  const paperRef = React.useRef(null);
+  const openRef = React.useRef(false);
+  const hasSelectedItemInListRef = React.useRef(false);
+  const openingMouseUpListenerCleanupRef = React.useRef(null);
+  const didPointerDownOnItemRef = React.useRef(false);
+  const selectionRef = React.useRef({
+    allowSelectedMouseUp: false,
+    allowUnselectedMouseUp: false
+  });
+  const selectedMouseUpTimer = (0, _useTimeout.default)();
+  const unselectedMouseUpTimer = (0, _useTimeout.default)();
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
@@ -176,6 +221,42 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     value
   }), [value]);
   const open = displayNode !== null && openState;
+  (0, _useEnhancedEffect.default)(() => {
+    openRef.current = open;
+  }, [open]);
+  const clearSelectionTimers = React.useCallback(() => {
+    selectedMouseUpTimer.clear();
+    unselectedMouseUpTimer.clear();
+  }, [selectedMouseUpTimer, unselectedMouseUpTimer]);
+  const resetMouseUpSelection = React.useCallback(() => {
+    clearSelectionTimers();
+    didPointerDownOnItemRef.current = false;
+    selectionRef.current = {
+      allowSelectedMouseUp: false,
+      allowUnselectedMouseUp: false
+    };
+  }, [clearSelectionTimers]);
+  const clearOpeningMouseUpListener = React.useCallback(() => {
+    if (openingMouseUpListenerCleanupRef.current) {
+      openingMouseUpListenerCleanupRef.current();
+      openingMouseUpListenerCleanupRef.current = null;
+    }
+  }, []);
+  React.useEffect(() => {
+    if (!open) {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+    }
+  }, [open, resetMouseUpSelection, clearOpeningMouseUpListener]);
+
+  // Keep unmount cleanup separate from the `open` effect. Effect cleanups also run
+  // before the next effect, which would clear the opening mouseup listener while opening.
+  React.useEffect(() => {
+    return () => {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+    };
+  }, [resetMouseUpSelection, clearOpeningMouseUpListener]);
   React.useEffect(() => {
     if (!open || !anchorElement || autoWidth) {
       return undefined;
@@ -226,7 +307,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (openParam, event) => {
+  const update = (0, _useEventCallback.default)((openParam, event) => {
+    if (!openParam) {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+    }
     if (openParam) {
       setOpenInteractionType((0, _utils2.getOpenInteractionType)(event));
       if (onOpen) {
@@ -239,9 +324,33 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }
     if (!isOpenControlled) {
+      openRef.current = openParam;
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       setOpenState(openParam);
     }
+  });
+  const scheduleMouseUpSelection = () => {
+    resetMouseUpSelection();
+
+    // When there is no selected item in the list, a mousedown
+    // on the trigger followed by a quick mouseup over the first option can accidentally select
+    // within 200ms. Delay unselected mouseup to match the safer 400ms window.
+    if (!hasSelectedItemInListRef.current) {
+      selectedMouseUpTimer.start(SELECTED_MOUSE_UP_DELAY, () => {
+        selectionRef.current.allowSelectedMouseUp = true;
+        selectionRef.current.allowUnselectedMouseUp = true;
+      });
+    } else {
+      // mousedown -> move to unselected item -> mouseup should not select within 200ms.
+      unselectedMouseUpTimer.start(UNSELECTED_MOUSE_UP_DELAY, () => {
+        selectionRef.current.allowUnselectedMouseUp = true;
+
+        // mousedown -> mouseup on selected item should not select within 400ms.
+        selectedMouseUpTimer.start(UNSELECTED_MOUSE_UP_DELAY, () => {
+          selectionRef.current.allowSelectedMouseUp = true;
+        });
+      });
+    }
   };
   const handleMouseDown = event => {
     onMouseDown?.(event);
@@ -252,6 +361,29 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
+    const doc = (0, _ownerDocument.default)(event.currentTarget);
+    scheduleMouseUpSelection();
+    clearOpeningMouseUpListener();
+    const handleMouseUp = mouseEvent => {
+      openingMouseUpListenerCleanupRef.current = null;
+      if (!displayRef.current) {
+        return;
+      }
+      if (isMouseEventInsideElement(mouseEvent, displayRef.current) || isMouseEventInsideElement(mouseEvent, paperRef.current)) {
+        return;
+      }
+      if (!openRef.current && isOpenControlled) {
+        return;
+      }
+      update(false, mouseEvent);
+    };
+    doc.addEventListener('mouseup', handleMouseUp, {
+      capture: true,
+      once: true
+    });
+    openingMouseUpListenerCleanupRef.current = () => {
+      doc.removeEventListener('mouseup', handleMouseUp, true);
+    };
     update(true, event);
   };
   const handleClose = event => {
@@ -271,6 +403,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
   const handleItemClick = child => event => {
+    didPointerDownOnItemRef.current = false;
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -314,6 +447,19 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       update(false, event);
     }
   };
+  const handleItemMouseUp = (child, selected) => event => {
+    child.props.onMouseUp?.(event);
+    if (didPointerDownOnItemRef.current) {
+      didPointerDownOnItemRef.current = false;
+      return;
+    }
+    const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
+    const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
+    if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
+      return;
+    }
+    event.currentTarget.click();
+  };
   const handleKeyDown = event => {
     if (!readOnly) {
       const validKeys = [' ', 'ArrowUp', 'ArrowDown',
@@ -387,7 +533,16 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
+      onMouseDown: event => {
+        didPointerDownOnItemRef.current = true;
+        child.props.onMouseDown?.(event);
+      },
+      onPointerDown: event => {
+        didPointerDownOnItemRef.current = true;
+        child.props.onPointerDown?.(event);
+      },
       onClick: handleItemClick(child),
+      onMouseUp: handleItemMouseUp(child, selected),
       onKeyUp: event => {
         if (event.key === ' ') {
           // otherwise our MenuItems dispatches a click event
@@ -406,6 +561,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       'data-value': child.props.value // Instead, we provide it as a data attribute.
     });
   });
+
+  // Keep the opening mouseup guard current without mutating refs during render.
+  (0, _useEnhancedEffect.default)(() => {
+    hasSelectedItemInListRef.current = foundMatch;
+  }, [foundMatch]);
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -455,6 +615,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   };
   const classes = useUtilityClasses(ownerState);
   const menuPaperSlotProps = typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper;
+  const handlePaperRef = (0, _useForkRef.default)(menuPaperSlotProps?.ref, paperRef);
   const menuListSlotProps = typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list;
   const listboxId = (0, _useId.default)();
   const nativeInputId = (0, _useId.default)();
@@ -469,7 +630,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
       "aria-label": ariaLabel,
-      "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
+      "aria-labelledby": labelId,
       "aria-describedby": ariaDescribedby,
       "aria-required": required ? 'true' : undefined,
       "aria-invalid": error ? 'true' : undefined,
@@ -536,6 +697,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           },
           paper: {
             ...menuPaperSlotProps,
+            ref: handlePaperRef,
             style: {
               minWidth: menuMinWidth,
               ...menuPaperSlotProps?.style