Not closing the calendar on selection of a date

The calendar is not hidden when a calendar date is selected. No errors or warnings are placed into the console. React Calendar V 0.53.0

<DatePicker
            className={"date-field" + (className ? " " + className : "") + (error ? " error" : "")}
            selected={date}
            onChange={(newValue) => onChange(identifier, newValue)}
            dateFormat="DD/MM/YYYY"
        />

[honzajerabek]

adding <label onClick={e => e.preventDefault()}><DatePicker .... /></label> fixed this issue for me. In debugger I found that after select, setOpen(false) was called and DatePicker was closed but right after that it was reopened again (by label? 🤔)

edit: I’m using semantic-ui-react that has their own implementation of label behavior, but you have the idea…

[giorgosavgeris]

If the datepicker remains open because it is wrapped inside label, you can call preventDefault on onChange.

import React from 'react';
import DatePicker from 'react-datepicker';

class MyDatepicker extends React.Component {
  handleChange = (date, e) => {
    if (e && typeof e.preventDefault === 'function') {
      e.preventDefault();
    }

    const {onChange} = this.props;

    if (onChange) {
      onChange(date);
    }
  };

  render() {
    return (
      <DatePicker
          {...this.props}
         onChange={this.handleChange}
      />
    );
  }
}
...