Autocomplete component don't lock screen when opened

[sandroweb]

In Select component, when to open, screen will be locked, but the same feature don't occure with Autocomplete component.

This problem cause a problem. When my page is scrolled, the list opened go up too.

Any one help me please?

Screen video with this problem: https://www.loom.com/share/b89ca160eb314b728c025ee9fde65c47

[oliviertassinari]

Duplicate of #21661

[sandroweb]

Duplicate of #21661

Is not duplicated, because #21661 is about position of the opened list. My problem is in dont lock the container scroll in the action of to open the list, like the select component. You was read my issue?

[nmchaves]

I think @sandroweb is right. This is different from #21661.

Sandro's point is that the Autocomplete component isn't consistent with the Select component right now. The Select component locks the body scroll, while the Autocomplete component does not.

In other words, you can scroll up and down the page even when an Autocomplete's listbox is open. IMO, it would be better if Autocomplete behaved like Select.

The video in the issue description shows the difference between Select and Autocomplete. In the first 10 seconds of the video, Sandro shows how you can't scroll when a Select menu is open. Then, at 0:15, Sandro shows how you can scroll when an Autocomplete is open.

I think the difference arises from the fact that Select builds on top of Modal (via Menu/Popover), whereas Autocomplete builds on top of Popper. Modal locks the scroll (unless disableScrollLock=true), but Popper doesn't lock the scroll.

Would it make sense to reopen this issue?

Edit: There is some discussion about this topic in #18136. See the 2nd item of #18136 (comment). So I think it would make sense for this issue to remain closed.

As an aside:
Thanks for such a terrific library! 🙏 MUI makes my life much better 😄

[damianobarbati]

@nmchaves this issue was closed but how can the problem be solved? How do we lock the outer scroll when Autocomplete is open? I still see this in @mui/material v5.14.7

[enoh-barbu]

Just do it for yourself

const onOpen = () => {
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = window.innerWidth - document.body.clientWidth
};

const onClose = () => {
    document.body.style.overflow = '';
    document.body.style.paddingRight = ''
};

onOpen={onOpen}
onClose={onClose}