React MDBDatePicker unresponsive


Topic: React MDBDatePicker unresponsive

marrielle.aboujaoude asked 5 years ago

Expected behavior When the modal for the date picker pops up, I am not being able to select or navigate any of the dates nor I can click on Cancel/OK. I am not even able to close the picker. I found out that if I click the 'Esc' key then wait a second the date picker becomes responsive.

Actual behavior in version 4.20.0 my picker was working properly, updating to version 4.23.0 caused this issue

Resources (screenshots, code snippets etc.) I can't provide all the the code but I can provide how I am constructing the DatePicker this.getPickerValue("fromDate", value)} id="fromDate" name="fromDate" format="YYYY-MM-DD" valueDefault={this.props.fromDate} value={this.props.fromDate} label="From Date" />


Piotr Glejzer staff commented 5 years ago

Hello,

do you have an example with code? May you show it? Thanks.

Best, Piotr


marrielle.aboujaoude commented 5 years ago

I have provided an example below with an error in the cosnole


Jakub Chmura staff premium answered 5 years ago

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


Piotr Glejzer staff commented 5 years ago

Yes, I tested it and there is a little bug about. SooSoo_El-Shreer explained a little about that. We will try to fix this with ASAP. Have a nice day.


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


Piotr Glejzer staff commented 5 years ago

Thanks for the post, we already know about that. We will try to fix this as soon as possible. Have a nice day.


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.0
  • Device: Web Browser
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No