React MDBDatePicker unresponsive

Hi,

If you want to use MDBDatePicker inMDBModal just add the prop disableFocusTrap to disable the default modal focus trap. Date picker shows as an additional modal so it will never work with MDBModal without disabling focus trapping on parent modal.

best, Kuba

          <MDBModal isOpen={this.props.modal} size="lg">
        <MDBModalHeader
            className="text-center"
            titleClass="w-100 font-weight-bold"
            toggle={this.props.toggle}
        >
        Modal Header
        </MDBModalHeader>
        <MDBModalBody>
                <MDBDatePicker
                id="Date"
                name="Date"
                format="YYYY-MM-DD"
                closeOnCancel
                cancelable
                autoSwitch={false}
                valueDefault={this.state.Date}
                value={this.state.Date}
                label="From Date"
                className="date-picker-range"
                />


        </MDBModalBody>
        <MDBModalFooter>
        </MDBModalFooter>
    </MDBModal>

toggle is a function. which is provided by parent component

This issue happens when MDBDatePicker is inside MDBModal. In this same MDBModal I have MDBTimePicker which works properly. In the console the following error shows up "Modal.js:227 Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.Modal._this.enforceFocus (Modal.js:227) at tryFocus (index.js:267) at HTMLDocument.checkFocusIn (index.js:210) "

Since am a certified Genius, I traced this issue for a bit.I found out that the difference between mdbreact-4.20.0 and mdbreact-4.23.0 was some addition of new dependencies. There is a particular dependency that is called 'focus-trap-react' which depends on another dependency called 'focus-trap'.So when 'focus-trap-react' component is mounted it does the following check:

      if (this.props.active) {
        this.focusTrap.activate();
      }

The activate function (which is inside 'focus-trap' component) then makes a call to addListeners() function. Inside addListeners you will encounter this block of code

delay(function() {
  tryFocus(getInitialFocusNode());
});

Which will be the reason the stack trace gets filled to the max. this function gets repeated infinitely till the code breaks.

It is worth mentioning that there is block of code that states:

function isEscapeEvent(e) {
      return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
}

This is why you are able to use the date picker normally after you press Esc. Because You are actually terminating the calls to tryFocus().

One hacky solution is commenting out the line of code this.focusTrap.activate() so it will be like this

if (this.props.active) {
        //this.focusTrap.activate();
}

But this needs an answer from the MDBReact developers.Best Regards,SooSoo 'Genius' El-Shreer