[Drawer] Using useRef inside a drawer gives current=null

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Creating ref pointing to a Drawer or any element within the Drawer returns ref.current=null

Expected Behavior 🤔

I’m expecting to be able to create a ref inside a Drawer and be able for example to scroll to the bottom.

Steps to Reproduce 🕹

Steps:

import React, { useEffect, useRef } from "react";
import Drawer from "@material-ui/core/Drawer";

function Example () {
  const ref = useRef(null);
  useEffect(() => {
    //{current: null}
    console.log(ref);
  }, [ref]);

  return (
    <Drawer open={true}>
      <div ref={ref} style={{
        overflowY: "auto"
      }}>
        Some Content
      </div>
    </Drawer>
  );
}

export default Example;

Context 🔦

I’m trying to create a chat box inside the Drawer, in order to improve CX, I need to scroll down to the bottom when new message are coming. I’m using 3 Grid items inside a container. 1 as header 1 to show the messages (that one that I need to make the auto-scroll) 1 at the bottom for the text field

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
React	v16.13.1
Browser	chrome
etc.

[oliviertassinari]

Great to hear 😃

[idirouhab]

apologies @oliviertassinari , I couldn’t answer before. Somehow now it’s working but I don’t know what it was wrong but since I’m not able to reproduce it I’m happy to close the issue.

Thank you.