Topic: Anyway to prevent <MDBDatePicker> from closing <MDBModal>
Using MDB React Pro version 4.15.0
Expected behavior When using inside , it should not close when there is any interaction with it such as selecting a date, clicking outside the datepicker, clicking the cancel or ok buttons.
I did try using v3 of @material-ui/pickers to see if the issue exists there but no go with it having an error with bootstrap right off the bat.
Actual behavior closes upon any interaction with even though the
Resources (screenshots, code snippets etc.)
Hi,
Set backdrop property to false in <MDBModal> component:
<MDBModal isOpen={this.state.modal} toggle={this.toggle} backdrop={false}>
It should help. But backdrop then will no longer be available.
We will revise the approach to the implementation of backdrop onClick method in the near future.
Best regards.
johndoe pro commented 6 years ago
Ah yes this helps as a work around.
I can manually add the modal backdrop div as part of my return when passing the props to showing the modal.
Thanks Aliaksandr.
Aliaksandr Andrasiuk staff commented 6 years ago
The problem is that Datapicker mounting to the body, but our backDrop click method checks if click() was on the element which situated in Modal.
We will fix this.
Thank you for the founded issue and provided Snippet.
Best regards.
Snippet if anyone else needs it:
{!backdrop && modalName && <div className="modal-backdrop fade show"></div>}
<MDBModal isOpen={modalName} toggle={toggle('myModalName')} size="lg" backdrop={backdrop}>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No