React-datepicker: Datepicker inside a modal

[reyhansofian]

Hi, I have a datepicker inside a modal. Whenever I clicked on the date, the modal got closed too. Is there a way to avoid this? My code looks like this

import React from 'react';
import moment from 'moment';
import { change } from 'redux-form';
import DatePicker from 'react-datepicker';

class ReservationDetailsCheckinContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  handleInputChange(e) {
    console.log(e);
  }

  render() {
    return (
      <div className="pull-left" style={{
        width: '65%'
      }}>
        <label>
          Check-in Date
        </label>
        <div>
          <DatePicker selected={this.state.startDate} onChange={this.handleInputChange}/>
        </div>
      </div>
    );
  }
}

export default ReservationDetailsCheckinContainer;

[TMUND]

Have you tried e.stopPropagation()?

[mezod]

Did you make anything special to make it work inside a modal? It doesn't work for me

[leojh]

Anyone find a solution to this?

[ghost]

The problem here is that the onChange callback only provides the newly selected date, but not the event associated with it. If we would get the event as lets say second parameter the following code should work:

handleInputChange(date, e) { e.persist(); e.stopPropagation(); }

It would work because AFAIK most modals are adding a click listener to window and then check if the click target (in our case the datepicker calendar) is the modal itself or a children of it.

BUT
React datepicker is using the tether library to connect the date input field with the calendar component and tether is placing the calendar outside the modal before the closing body tag for positioning reasons

So technically the calendar is not inside your modal and thats why it closes. As I wrote already, exposing the React event in the onChange callback would probably solve this, since then you can stop the event from reaching the window onclick listener

[reyhansofian]

Yeah, you're right. Thanks for your answer

Reyhan Sofian
Web Developer
On Jul 14, 2016 4:07 PM, "Sascha Mayr" [email protected] wrote:

The problem here is that the onChange callback only provides the newly
selected date, but not the event associated with it. If we would get the
event as lets say second parameter the following code should work:

handleInputChange(date, e) {
e.persist();
e.stopPropagation();
}

It would work because AFAIK most modals are adding a click listener to
window and then check if the click target (in our case the datepicker
calendar) is the modal itself or a children of it.

BUT
React datepicker is using the tether library to connect the date input
field with the calendar component and tether is placing the calendar
outside the modal before the closing body tag for positioning reasons

[image: bildschirmfoto 2016-07-14 um 10 44 16]
https://cloud.githubusercontent.com/assets/5527658/16834136/c478e616-49b2-11e6-8491-6d8c01ef57f8.png

So technically the calendar is not inside your modal and thats why it
closes. As I wrote already, exposing the React event in the onChange
callback would probably solve this, since then you can stop the event from
reaching the window onclick listener

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/488#issuecomment-232609299,
or mute the thread
https://github.com/notifications/unsubscribe/AFGxgY-S712uRFIMqmbctg95_aEfbXeTks5qVfxEgaJpZM4Ikvuc
.

[LeoZeda]

Is there a way to get the event?

[amakhrov]

Actually, passing the event into onChange wouldn't solve the issue completely. A user can click on the calendar without selecting a date (e.g. navigating between months). And in the scenario above it will as well close the modal.

An alternative suggestion is to introduce a new property: stopPropagationOnClick: PropTypes.bool. If this property is true, the component will run e.stopPropagation() on all mouse clicks inside the calendar.

@martijnrusschen would you consider a PR with the proposed change?

[tommyalvarez]

@martijnrusschen In my case i have a date picker input inside a table row and the tr is clickable (it handles the onClick event). So i also need to prevent that clicking the input, bubbles up to the row.

[krupatel]

I am facing the similar issue where i have date picker which opens up on a input file type. So it opens the file browser window if we select the date from the area exactly on top of input field.
Any solution to prevent the event propagation ?

[lukastillmann]

bump

I am having the same issue. Any solution would be very welcome!

[ishake]

I am also having this issue on the time picker portion of this.

[Kitloo]

Any solution? @@

[vincentwongso]

Event propagation is not passed if time-picker is enabled.
See the following example:
https://codesandbox.io/s/2w4611793j

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.