Open rujoota opened 5 years ago
I too am facing the same issue for singe date picker month and year dropdown
Same,, seems no solution yet
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
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";
}
closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater
@skratchdot I still have the issue with 6.0.0. Removing the tabIndex
attribute still works though.
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?
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.
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?
Yes, I am using React Bootstrap's Modal.
Here's a minimal example: https://codesandbox.io/s/issue-204-repro-skratchdotreact-bootstrap-daterangepicker-dpm1x
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).
that makes sense. thank you for the links and examples!
I tried the parentEl
solution, it works but there's a caveat: if the modal is not wide enough, the calendars will stack vertically.
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">
awesome! thanks for sharing this info @floriancargoet!
@madhu131313 thanks for the inspiration.
I automated this problem this way;
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}
...
Hello again,
It also happens if you give this feature to the modal in this way.
import { Modal } from "react-bootstrap";
<Modal
enforceFocus={false}
....
I am facing the same issue
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)