Topic: Anyway to prevent <MDBDatePicker> from closing <MDBModal>

johndoe pro asked 3 years ago


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.)


Aliaksandr Andrasiuk staff answered 3 years ago


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 3 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 3 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.


johndoe pro answered 3 years ago


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}>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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