[SelectInput] Update menu to use select wrapper as anchor (#34229)

Co-authored-by: Michał Dudak <[email protected]>

Author: EduardoSCosta

packages/mui-material/src/Select/Select.test.js

@@ -851,27 +851,29 @@ describe('<Select />', () => {
   });
 
   describe('prop: autoWidth', () => {
-    it('should take the trigger width into account by default', () => {
-      const { getByRole, getByTestId } = render(
+    it('should take the trigger parent element width into account by default', () => {
+      const { container, getByRole, getByTestId } = render(
         <Select MenuProps={{ PaperProps: { 'data-testid': 'paper' } }} value="">
           <MenuItem>Only</MenuItem>
         </Select>,
       );
+      const parentEl = container.querySelector('.MuiInputBase-root');
       const button = getByRole('button');
-      stub(button, 'clientWidth').get(() => 14);
+      stub(parentEl, 'clientWidth').get(() => 14);
 
       fireEvent.mouseDown(button);
       expect(getByTestId('paper').style).to.have.property('minWidth', '14px');
     });
 
-    it('should not take the triger width into account when autoWidth is true', () => {
-      const { getByRole, getByTestId } = render(
+    it('should not take the trigger parent element width into account when autoWidth is true', () => {
+      const { container, getByRole, getByTestId } = render(
         <Select autoWidth MenuProps={{ PaperProps: { 'data-testid': 'paper' } }} value="">
           <MenuItem>Only</MenuItem>
         </Select>,
       );
+      const parentEl = container.querySelector('.MuiInputBase-root');
       const button = getByRole('button');
-      stub(button, 'clientWidth').get(() => 14);
+      stub(parentEl, 'clientWidth').get(() => 14);
 
       fireEvent.mouseDown(button);
       expect(getByTestId('paper').style).to.have.property('minWidth', '');

packages/mui-material/src/Select/SelectInput.js

@@ -158,6 +158,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     }
   }, []);
 
+  const anchorElement = displayNode?.parentNode;
+
   React.useImperativeHandle(
     handleRef,
     () => ({
@@ -173,7 +175,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
     if (defaultOpen && openState && displayNode && !isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -215,7 +217,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     }
 
     if (!isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       setOpenState(open);
     }
   };
@@ -479,7 +481,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   let menuMinWidth = menuMinWidthState;
 
   if (!autoWidth && isOpenControlled && displayNode) {
-    menuMinWidth = displayNode.clientWidth;
+    menuMinWidth = anchorElement.clientWidth;
   }
 
   let tabIndex;
@@ -546,7 +548,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       <SelectIcon as={IconComponent} className={classes.icon} ownerState={ownerState} />
       <Menu
         id={`menu-${name || ''}`}
-        anchorEl={displayNode}
+        anchorEl={anchorElement}
         open={open}
         onClose={handleClose}
         anchorOrigin={{