-
Notifications
You must be signed in to change notification settings - Fork 205
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Timepicker dropdowns don't work in modal popup #204
Comments
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
It should work. In other case I had to the following for the bootstrap modal I am using.
|
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 |
The time drowdowns from this example appears to work: 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 Are you using: 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 |
that makes sense. thank you for the links and examples! |
OK, instead of giving the modal element as <Modal className="unique-class">
<Modal.Body>
<DateRangePicker initialSettings={{ parentEl: ".unique-class" }} />
</Modal.Body>
</Modal> I'd prefer to use an id but the <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)
The text was updated successfully, but these errors were encountered: