onopen callback for Drawer component

[kcsujeet]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, there's no onOpen callback in drawer component and because of that I'm having to set a timeout to wait for the drawer to completely open and do something.

Examples 🌈

Here is the code sandbox. Link

Motivation 🔦

I want to do things when the drawer is completely opened. For example: open autocomplete programmatically.

[Depender-Sethi]

Actually, the Drawer component does have a callback that you can use to trigger an action when the opening transition is complete. It's called 'onTransitionEnd', and it's exactly what you're looking for. Instead of using a timeout to wait for the drawer to open completely, you can simply attach your desired action to the 'onTransitionEnd' callback, and it will be executed automatically when the opening transition is finished.

[kcsujeet]

Actually, the Drawer component does have a callback that you can use to trigger an action when the opening transition is complete. It's called 'onTransitionEnd', and it's exactly what you're looking for. Instead of using a timeout to wait for the drawer to open completely, you can simply attach your desired action to the 'onTransitionEnd' callback, and it will be executed automatically when the opening transition is finished.

That's exactly what I was looking for. Why isn't this documented anywhere? .. I couldn't find this prop mentioned in either the Drawer docs or the Modal docs. Not even in the Transition component docs.

[Depender-Sethi]

Great to hear that 'onTransitionEnd' worked for you! The reason it wasn't mentioned in the MUI library documentation is because it's not actually a function of the library itself. Instead, 'onTransitionEnd' is an event that's triggered on certain HTML elements when a CSS transition is completed. You can find more information on this event in the MDN web docs (https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event). So while 'onTransitionEnd' isn't explicitly documented by MUI, it's a widely-used event in web development that can be applied to a variety of HTML elements.

[kcsujeet]

@Depender-Sethi ... that makes complete sense. Thank you very much for your help. I appreciate it a lot. 🙌