[Autocomplete] change in screen size doesn't change width of Options container (when it's open)

[gaurikolhe]

I am using AutoComplete component on my iPad. When I click on options and rotate the screen (portrait mode to landscape mode on Chrome, Safari & Firefox) the options container width doesn't reset with Textfield width of Autocomplete.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have added screen shot of how it looks when I rotate screen. The AutoComplete code is as below <Autocomplete label="Select My HomePage" id="homePage" clearOnBlur clearOnEscape required forcePopupIcon freeSolo fullWidth onChange={onHomePageChange} value={selectedHomePage} options={[ { id: 1, name: "Batch Assistant" }, { id: 2, name: "Load Report" }, { id: 3, name: "Truck Map" }, ]} />

Expected Behavior 🤔

It should resize option container width on rotate screen.

Steps to Reproduce 🕹

1. Open Safari browser in developer mode
2. Render above code using Autocomplete component using MUI.
3. Rotate Screen (change screen size in developer mode)

Context 🔦

Your Environment 🌎

Material-UI - 4.11.4 React - 17.0.2 Typescript - 4.2.4

[ahmetuysal]

I am having the same issue. Are there any workarounds we could use until the problem is fixed?

[yhaizler]

@gaurikolhe @ahmetuysal Did you find a solution to this bug? I also encountered this, and I don't know how to handle it.

[sonam-diwate-personal]

any solution on this

[ISp1rit]

I solved it this way:

• I have a component MultiSelect, inside it I've imported import { useWindowSize } from '@uidotdev/usehooks';
• And added the next line useWindowSize(); before the return of JSX
• Also added the next comments with description of a workaround:

Workaround of this unresolved issue: https://github.com/mui/material-ui/issues/27670 When the window is resized this hook will trigger re-render of this component and popper width will be re-calculated