Material-ui: Drawer component animation doesn't seem to work

[tzs34]

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

Expected Behavior

The Drawer component should smoothly animate when opening and closing

Current Behavior

The drawer component immediately closes when opening or closing.
Do I have to set enter and leave transition props ? If so could you document that in the docs.

I'm using React v 16
Problem seen in latest chrome and firefox

[tzs34]

Sorry my mistake

[rafeautie]

what was the mistake?

[ananthsridhar]

what was the mistake?

From what I have found out now, if you inject the contents of the Drawer using a function like in the demo, it slides. If you put the content in the Drawer as is, it performs as above. Wonder if anyone has a technical explanation for this.

[defusioner]

Hey guys, I've fallen on the same problem but I realized that the way I was implementing a Drawer in my code is not the same as it is done in the demo.

My code had a hook that returns a Drawer in this manner:

return {
  Drawer: () => <MuiDrawer {...someProps} />
}

This is not a bug but a feature caused by refs that are forwarded inside the basic component:

const Drawer = React.forwardRef(function Drawer(props, ref) { ...

So a lambda usage creates a new component on new render and, well, ref is lost.

The workaround and exactly a right usage is to use the Drawer as inline code:

const drawer = <Drawer {...props} /> 

return (
  <ParentNode>
    <Content />
    {drawer}
</ParentNode>
)

@ananthsridhar FYI

[amandakoster]

@defusioner Would you be willing to show a bit more of your code? Running into the same issue.

[defusioner]

@defusioner Would you be willing to show a bit more of your code? Running into the same issue.

It’s in my previous comment. Basically you just need to keep the drawer in a constant to avoid recreation of an instance

[ViejoSawyer]

@defusioner Would you be willing to show a bit more of your code? Running into the same issue.

Did you find the solution for this?