Scroll to top of Dialog

[emptycrown]

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

Expected Behavior

I'm rendering a pretty long component within the dialog, and am using the autoscroll functionality to get the overflow-y: auto styling in the dialog content. At certain points, the component moves to the the next step, and I would like to instantly go to the top of the dialog content.

I saw that jQuery's scrollTop function can be used to get to the top of a component, but I'm unsure how to reference the dialogContent div. Please advise.

Current Behavior

Currently, when the component changes, the scroll remains the same, and the result is that the user sees a lower part of the new component.

Your Environment

Tech	Version
Material-UI	0.17.4
React	15.3.2
browser	Chrome
etc

[m2mathew]

If you want to manipulate the scrollPosition yourself programmatically, you need to use the Ref Callback pattern to have access to that DOM element directly.

Check StackOverflow and similar sources for other questions on how to use the library. 😄

[achikin]

DialogContent acts like a scroll view, so you can wrap your changing components in it's own DialogContent like this:

<Dialog>
  <DialogTitle>sfdasf</DialogTitle>
  <MyComponentThatChanges/>
  <DialogActions..../>
</Dialog>

<MyComponentThatChanges>
  <DialogContent>
    actual content here
  </DialogContent>
</MyComponentThatChanges>

This way each changing component will have it's own content, scrolled to the top.

[coryhouse]

The suggestion from @m2mathew doesn't work because window.scroll doesn't work on dialogs. I've found no solution for scrolling to an element in a dialog. If it's possible, I'd be happy to submit a PR documenting how to do so.

[JoeDuncko]

Just ran into this. Has anyone figured out a solution?

[achikin]

@JoeDuncko please try my solution.

[DzTheRage]

I was able to get this working using @achikin solution. Just nest a div inside of dialog content then render another dialog content.

<DialogContent>
   <div ref={node => {
	this.dialogContent = node;
      }}>
	<DialogContent className={classes.fixContentPadding}>
		Actual Content Here
	</DialogContent>
    </div>
</DialogContent>

handleNext = () => {
    /* Smooth scroll to top */
    this.dialogContent.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
     });
    /* Go to next step */
     const { activeStep } = this.state;
     this.setState({
     activeStep: activeStep + 1
     });
};