CODEWITHSUNDEEP
reactjsmaterial-ui
Ky Lane
Ky Lane

Reputation: 338

React/Material UI - Prevent body scrolling on popover

New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.

Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/

So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the

I was hoping someone may have had this issue and had a solution they'd like to share?

Thanks guys!

Upvotes: 5

Views: 15151

Answers (1)

mariano_c
mariano_c

Reputation: 431

I had a similar problem and solve it using 'disablePortal' Autocomplete property:

You can take a look at 'disablePortal' definition in here: https://material-ui.com/api/autocomplete/#props

disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.

I also had to add some styles to get pop up get positioned relative to input component.

Here is some sort of example:

const useStyles = makeStyles({
    popperDisablePortal: {
      position: 'relative',
    }
  })

const classes = useStyles()

<Autocomplete
  classes={classes}
  disablePortal={true}
  {...props}
/>

So you may have to:

  1. set up disablePortal property
  2. define associated popperDisablePortal style with 'relative' position

EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.

Upvotes: 4

Related Questions