[mui-material][Select] Fixed dropdown resizing bug

Author: thesolitary007

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

@@ -1866,4 +1866,51 @@ describe('<Select />', () => {
     expect(container.querySelector('.MuiSelect-iconFilled')).not.to.equal(null);
     expect(container.querySelector('.MuiSelect-filled ~ .MuiSelect-icon')).not.to.equal(null);
   });
+
+  describe('window resize', () => {
+    it('should update menu width when window resizes while menu is open', () => {
+      const { container } = render(
+        <div style={{ width: '200px' }}>
+          <Select open value="">
+            <MenuItem value="option1">Option 1</MenuItem>
+            <MenuItem value="option2">Option 2</MenuItem>
+          </Select>
+        </div>,
+      );
+
+      // Get the menu paper element
+      const menuPaper = container.querySelector('[role="presentation"]');
+      expect(menuPaper).not.to.equal(null);
+      const initialMinWidth = menuPaper.style.minWidth;
+
+      // Simulate window resize
+      const resizeEvent = new Event('resize', { bubbles: true });
+      window.dispatchEvent(resizeEvent);
+
+      // Menu width should be updated (menu paper should have minWidth)
+      expect(menuPaper.style.minWidth).to.equal(initialMinWidth);
+    });
+
+    it('should not update menu width on resize if autoWidth is true', () => {
+      const { container } = render(
+        <div style={{ width: '200px' }}>
+          <Select open value="" autoWidth>
+            <MenuItem value="option1">Option 1</MenuItem>
+            <MenuItem value="option2">Option 2</MenuItem>
+          </Select>
+        </div>,
+      );
+
+      const menuPaper = container.querySelector('[role="presentation"]');
+      expect(menuPaper).not.to.equal(null);
+      const initialMinWidth = menuPaper.style.minWidth;
+
+      // Simulate window resize
+      const resizeEvent = new Event('resize', { bubbles: true });
+      window.dispatchEvent(resizeEvent);
+
+      // Menu width should not have minWidth set when autoWidth is true
+      expect(menuPaper.style.minWidth).to.equal(initialMinWidth);
+    });
+  });
 });

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

@@ -161,6 +161,12 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   }, []);
 
   const anchorElement = displayNode?.parentNode;
+  const anchorElementRef = React.useRef(anchorElement);
+  
+  // Update the ref whenever anchorElement changes
+  React.useEffect(() => {
+    anchorElementRef.current = anchorElement;
+  }, [anchorElement]);
 
   React.useImperativeHandle(
     handleRef,
@@ -210,6 +216,29 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     return undefined;
   }, [labelId]);
 
+  // Update menu width on window resize when menu is open
+  React.useEffect(() => {
+    if (!openState || !displayNode || autoWidth) {
+      return undefined;
+    }
+
+    const handleResize = () => {
+      const currentAnchorElement = anchorElementRef.current;
+      if (currentAnchorElement) {
+        setMenuMinWidthState(currentAnchorElement.clientWidth);
+      }
+    };
+
+    const win = ownerDocument(displayNode).defaultView;
+    if (win) {
+      win.addEventListener('resize', handleResize);
+      return () => {
+        win.removeEventListener('resize', handleResize);
+      };
+    }
+    return undefined;
+  }, [openState, displayNode, autoWidth]);
+
   const update = (open, event) => {
     if (open) {
       if (onOpen) {