Material Dialog scrolls body to top on open

Question

I am using Material UI in a react app and want to open a dialog on my page. The Dialog opens fine, the only problem is when it opens it scrolls the body of my page to the top.

The scroll-to-top behavior also happens when I open a Material Popover and when I open a Material TextBox selector. I've searched for hours for a solution for this and it seems like no one else has experienced this behavior before.

Any help would be greatly appreciated!

openSendMatchPopup = (event) => {
  this.setState({
    ...this.state,
    anchorTargetTarget: event.target,
    dialogOpen: true,
  });
};   

<Dialog
  id='my-popover'
  open={dialogOpen}
  anchorEl={anchorTargetTarget}
  onClose={onClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center'
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
  disableRestoreFocus
>
  Dialog is Open
</Dialog>

Answer 1

我的解决方案是添加event.preventDefault()到处理程序中。