[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. React needs the component reference to be stable between two renders to stay mounted (if it changes, it unmounts, creating new DOM nodes, wrecking the animation).

[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?

[zlatinejc]

@defusioner this does not make any sense + it doesnt work.
I think the Drawer should be rendered upfront, but thats not a solution to me.

[vinc01100101]

I had this problem before, I initially had the Drawer open, but when I change its initial state to closed, it fixed the problem. It works fine now. Try hiding it first. Or set the prop transitionDuration={appear: 500, enter: 500, exit: 500} where values are in miliseconds

[elliottthomlison]

Was there a conclusion as to how one can fix this problem?

[samsouth]

Having the same issue ^

[morrid0]

I don't know if this will help anyone but, In the case of my project, the Drawer should have been rendered the first time with open={false}, then transitioned (re-rendered) to open={true}. As it receives the open value from outside the component, I solved it by using a simple useEffect:

const [isOpen, setIsOpen] = useState(false);

useEffect(() => setIsOpen(open), [open]);

...

return (
    <Drawer
      open={isOpen}
      onClose={onClose}
      anchor="bottom"
      {...props}
    >
      {children}
    </Drawer>
  );