Trying to Implement MUI like Drawer
Unanswered
Argente Brun posted this in #help-forum
Argente BrunOP
When the show button is clicked, the drawer opens and when hide button is clicked it closes. So for every thing is perfect .
But I also want to close the drawer, when the is a click outside of the drawer. and here is the issue.
When click outside is happened, the drawer opens up for the first time and its functionality conflicts with the effect of show button
This is the example link.
https://codesandbox.io/p/sandbox/relaxed-turing-2vdwjy
But I also want to close the drawer, when the is a click outside of the drawer. and here is the issue.
When click outside is happened, the drawer opens up for the first time and its functionality conflicts with the effect of show button
This is the example link.
https://codesandbox.io/p/sandbox/relaxed-turing-2vdwjy
18 Replies
I would just use this and take all your headache away 😄
https://www.npmjs.com/package/react-modern-drawer
https://www.npmjs.com/package/react-modern-drawer
Argente BrunOP
i wish i could do that but i need to implement it without nay UI library
Gotcha. Okay give me a moment to look at it
Is this for a school assignment or is this just something you need to implement and you cant use libraries where you are?
The question depends on how I answer the question lol
Argente BrunOP
it's for my job
lol
Gotcha, okay. Thats fine. Give me a min
Argente BrunOP
am I dreaming? I think I saw your solution and it just got vanished...lol
Check dms
Argente BrunOP
ok
Sorry. 😅
I provided a component from my production environment scrubbed of anything identifiable. Not going to share for everyone to grab sorry. @Argente Brun if what I sent you is good enough you can close this help ticket
American Crow
Remember these threads are a resource for others (in the future) seeking help. Most questions even get published to Google. I understand you don't want to give out production code but please don't make this a norm. We all know it's frustrating if you're the one researching a question finally finding a result and there is no answer in it.
@American Crow Remember these threads are a resource for others (in the future) seeking help. Most questions even get published to Google. I understand you don't want to give out production code but please don't make this a norm. We all know it's frustrating if you're the one researching a question finally finding a result and there is no answer in it.
I agree with the message, it was an easy out for me to help them get what they needed done quickly.
@Jboncz I provided a component from my production environment scrubbed of anything identifiable. Not going to share for everyone to grab sorry. <@1003218283199209513> if what I sent you is good enough you can close this help ticket
Argente BrunOP
I appreciate your help but that code did not work for me. but again thank you for you time and effort @Jboncz
@American Crow @Jboncz My code is now working as expected. I just need to prevent the event propagation on the button click which is outside the drawer.
now my drawer works as expected
now my drawer works as expected
but again I would not suggest someone to use my code. Use the component from a library. It's extremely painful to build a simple component in the right way. and yeah too much time consuming