Timepicker dropdowns don't work in modal popup

[rujoota]

The dropdowns for time selections(including seconds) are not working in a modal popup, they just won't stay open....they quickly open and close not allowing to do any selections.....while its working perfectly fine on a normal page.

Here is the code, I am trying to use in a popup(I am using blueprintjs for modal popup)

<DateRangePicker startDate={dateOptions.startDate} endDate={dateOptions.startDate}
                onApply={this.handleDateSelection}
                maxDate={dateOptions.maxDate} minDate={dateOptions.minDate}
                singleDatePicker={true}
                showCustomRangeLabel={false} locale={dateOptions.locale}
                autoUpdateInput={true} timePicker={true} timePicker24Hour={true} timePickerSeconds={true} drops={'up'} parentEl='.parentDivOfModalPopup' >
                <input readOnly={true}
                    value={this.someFuntion()}
                    className={'some-input-class'} />
            </DateRangePicker>

[madhu131313]

I too am facing the same issue for singe date picker month and year dropdown

[MimiLau]

Same,, seems no solution yet

[madhu131313]

I solved for my case, it's strange how it works and don't understand why it works. Here is how it worked for me

1. In the parent modal where I used DateRangePicker I removed tabIndex attribute

    if (document.querySelectorAll('[role="dialog"]')[0]) {
      document
        .querySelectorAll('[role="dialog"]')[0]
        .removeAttribute("tabIndex");
    }

It should work.

In other case I had to the following for the bootstrap modal I am using.

      document
        .querySelectorAll('[role="dialog"]')[0]
        .classList.contains("modal")
    ) {
      document.querySelectorAll('[role="dialog"]')[0].style.overflowY =
        "inherit";
    }

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater

[floriancargoet]

@skratchdot I still have the issue with 6.0.0. Removing the tabIndex attribute still works though.

[skratchdot]

The time drowdowns from this example appears to work:
https://projects.skratchdot.com/react-bootstrap-daterangepicker/?path=/story/daterangepicker--date-range-picker-with-times

Do you have example code that exhibits the issue? Can you put it on codesandbox.io (or somewhere that it is viewable?

[floriancargoet]

Your example is incorrect since the bug only occurs when the datepicker is in a modal. I'll try to put an example online later today.

[skratchdot]

Okay- I thought that might be the case! I should add some react-bootstrap examples to the storybook if that's what everyone is using. react-bootstrap-daterangepicker is a "weird" lib b/c it tries to be a simple/dumb wrapper around the upstream lib.

Are you using:
https://react-bootstrap.github.io/components/modal/

Or is it some other lib / way of using bootstrap w/ react?

[floriancargoet]

Yes, I am using React Bootstrap's Modal.

[floriancargoet]

Here's a minimal example: https://codesandbox.io/s/issue-204-repro-skratchdotreact-bootstrap-daterangepicker-dpm1x

[floriancargoet]

And here's one of the many issues upstream: https://github.com/dangrossman/daterangepicker/issues/2048
Maybe the only thing to do is to recommend a workaround in the documentation.
Removing the tabIndex attribute works, I'll need to try the other solution (specifying the correct parentEl element).

[skratchdot]

that makes sense. thank you for the links and examples!

[floriancargoet]

I tried the parentEl solution, it works but there's a caveat: if the modal is not wide enough, the calendars will stack vertically.

[floriancargoet]

OK, instead of giving the modal element as parentEl, we can give the parent of the modal (which fills the body) and there will be enough room.

<Modal className="unique-class">
  <Modal.Body>
    <DateRangePicker initialSettings={{ parentEl: ".unique-class" }} />
  </Modal.Body>
</Modal>

I'd prefer to use an id but the id prop on Modal is not set on the element we want to target:

<div
  role="dialog"
  aria-modal="true"
  class="fade unique-class modal show"                    // <= className goes here :-)
  tabindex="-1"
  style="display: block;"
>
  <div id="my-id" role="document" class="modal-dialog">   // <= id goes here :-(
    <div class="modal-content">
      <div class="modal-header">

[skratchdot]

awesome! thanks for sharing this info @floriancargoet!

[favger]

@madhu131313 thanks for the inspiration.

I automated this problem this way;

• When the component mount
• find the modal element from current element
• if any
• remove tabIndex attr

    const dateRangePickerRef = useRef();

    /*
    ** NOTE: "Timepicker dropdowns don't work in modal popup"
    ** Bug Github Example: https://github.com/skratchdot/react-bootstrap-daterangepicker/issues/204#issuecomment-537884477
    */
    useEffect(() => {
        const modalEl = KTUtil.parents(dateRangePickerRef.current.ref, ".modal[role='dialog']");

        if(modalEl){
            modalEl[0].removeAttribute("tabIndex");
        }
    }, [dateRangePickerRef]);

        <DateRangePicker
            ref={dateRangePickerRef}
       ...

[favger]

Hello again,

It also happens if you give this feature to the modal in this way.

import { Modal } from "react-bootstrap";

<Modal 
    enforceFocus={false}
    ....

[UsamaSarfaraz0]

I am facing the same issue