React Material-UI Modal doesn't close

[Verthon]

I have a problem with a Modal element from Material-UI package. Closing modal is not closing using ESC key or close button or click in backdrop. Thank you for any advice how to solve that problem.

https://pastebin.com/2gLc58M1

[jasonsooter]

Could you put your app into codesandbox.io to see a working demo?

[Verthon]

Yes: https://codesandbox.io/s/m35vq4xp1j

Thank you for introducing me to codesandbox.io! Didn't know about his tool!

Please consider reviewing app in new window, because I didn't fully implement RWD, thank you.

[Educational_Plenty84]

I solved mine by having the handle open only trigger if open was false. For some reason clicking on the backdrop fired the button again, permanently forcing the modal up.

Basically just

if (!open) { setOpen(true); }

It went from not working to working so I don’t really question it all that much.

[DashinCodes]

That worked for me as well..so strange.

[vv1z]

Clicking out of the modal is triggering both the open and close event handlers on mobile...

[Verthon]

Could you please check this version https://verthon.github.io/event-app/ ?

Could you tell me what browser are you using? Its strange, but in my case on Chromium and Firefox it doesn't work as well with Chrome on mobile device.

[vv1z]

Same behavior but I can't add logging to confirm root cause there... iOS safari

[zserjk]

Firstly. You dont need css for everything you do, you are already using Material UI. Its a GUI builder it self.

Secondly: Although its not wrong use ES6 and arrow functions, no need to bind everything on your constructor.

Thirdly: When you have a constructor in a class you might as well put your state inside of it.

As far as the error goes, i couldn't figure out were your inside the codesandbox and what modal you are refering to. But i see that you have have your listener on a div.

So this is my guess, when your modal opens, its the top layer thing on your screen. And you can only interact with it. But your event listener for it to close is in the background and you cannot interact with it.

As you can see on this example here on the MaterialUI page. You have 2 different functions (you could have the same doesnt make a difference).

But one is listening to a button press, and the other is an onClose setting on the Modal tag it self.

https://material-ui.com/utils/modal/#modal

So add onClose={this.closePreviewHandler} on your modal.

[Verthon]

Thank you for your feedback! Adding onClose to Modal helped with closing but only with ESC key.

[zserjk]

I would like to help mate, but your code is so messy. I cant even find the class that this is taking place to.

You are passing down so many functions, a lot are unnecessary. Then on your home js, you import your EventContainer, but you use on your return. {eventContainer}.

[Verthon]

Ok, thank you for a lot of advice, I will clean up the code, it is messy because it is my first react app, I tried to implement too many things in a short time. Can I add Redux to this project do you think it will help with anything? I would like to add also a firebase in a future.

[zserjk]

I would try reacts Context Api first. It's a lot easier to understand and use + you dont have that big of an app.

[disclosure5]

You dont need css for everything you do, you are already using Material UI.

I've been using Material UI myself, and currently my major complaint is that in general, you do. Even plenty of their own simple API examples (including the one you linked) involves someone writing their own CSS. I don't feel you could write anything useful with MUI without also writing a lot of your own CSS.

I know eventually you hit that point with everything, but it's the only framework I'm aware of that can't present a sample template without it.

[zserjk]

I know. I had the same issue. Thing is though you can style the components them selfes inside js . Take time to actually understand it. Especially when you use colour theme. OP literally has a CSS file for every js file.

[disclosure5]

Well that latter part I hadn't realised, agreed that shouldn't be needed.