List API component initialized with múltiple ListItem components sets initial scroll position to the bottom, no clear way to set it to top

[javismiles]

• I create a dialog with material-ui
• Inside I build a list dynamically
• The list has many ListItem components inside
• Once built, the initial scroll position is the bottom of the list.
• I need to have the initial scroll set to the beginning of the list.
• There is no clear way to do this. Using RootRef or Ref to get a handle to the DOM element fails to get the right handle on render completion (it returns null on render completion in both cases. It returns a valid handle when the list gets unmounted at which time it is not useful anymore).

class PickModal extends React.Component {
    constructor() {
      super();
      this.pickRef = React.createRef();
    }

    componentDidMount() {
      console.log(this.pickRef.current); // DOM node
      if (this.pickRef.current){
        console.log("scrolltop: "+this.pickRef.current.scrollTop);
      }
    }

    componentDidUpdate() {
      console.log(this.pickRef.current); // DOM node
      if (this.pickRef.current){
        console.log("scrolltop: "+this.pickRef.current.scrollTop);
      }

    }

   handleListItemClick = (value, launcherfunc) => {
    console.log(this.pickRef);
    if (this.pickRef.current){
      console.log("handleListItemClick ref: "+this.pickRef.current.scrollTop);
    }

  };

   thelist =  models.map((model) => (
      <ListItem button onClick={() => this.handleListItemClick(model, this.props.launcherfunc)} key={model}>
        <ListItemAvatar>
          <Avatar>
            <LandscapeIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary={model} />
      </ListItem>
    ));

render() {
  return (
    <RootRef rootRef={this.pickRef}>
    <Dialog onClose={this.props.closeModelsModal} aria-labelledby="simple-dialog-title" open={this.props.modalModels}>
      <DialogTitle id="simple-dialog-title">Choose model</DialogTitle>
      <List > 
        {this.thelist}
      </List>
    </Dialog>
    </RootRef>
  );
}
}

const mapStateToProps = (state) => {
  return { modalModels:state.modalModels };
};

export default connect(mapStateToProps, { closeModelsModal})(PickModal);

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[javismiles]

@oliviertassinari Thank you, I switched to normal ref yes, the main issue seems to be that componentDidUpdate() is not firing after render of the material-ui list is completed, but before. I can prove this by using plain javascript: var scrollPos= document.getElementsByClassName("MuiDialog-paper"); This returns undefined after componentDidUpdate fires. Yet it returns the correct value later on after a few seconds. It seems to me that componentDidUpdate is firing incorrectly in conjuntion with this material-ui component thank you

[javismiles]

This is the way I made it work

    componentDidUpdate() {
      setTimeout(function(){ 
        var scrollPos= document.getElementsByClassName("MuiDialog-paper");
        if (scrollPos.length>0){scrollPos[0].scrollTop=0;}
      }, 200);
}

certainly a very absurd way, but the only way I found. Seems like the rendering of the list goes beyond useEffect, componentDidUpdate etc firings, so the only way is to wait x time to then check things out, etc

It would be great if the documentation maybe provided some suggestion to detect the full completed rendering of material-ui components such as List, etc

thank you