React-datepicker: Not closing the calendar on selection of a date

[Francismb]

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"
        />

[erikxcore]

Had the same issue, but in my case I had a label that was wrapping the date picker that caused this problem.

e.g.

<fieldset className='form-group'>
<label>
Date Posted:
<DatePicker selected={this.state.datePosted} onChange={this.handleDateChange} todayButton={"Today"} required/>
</label>
</fieldset>

[ashic]

I have the same issue. Datepicker doesn't close if a date is selected.

[tourshi]

I can confirm, I am experiencing the same issue. If Datepicker is wrapped in a label tag it doesn't close on selecting a date.

[warmbowski]

I see this problem to. I have a component that wraps a Datepicker component in a label tag. The calendar stays open after selection. If I change the label to a div, it works properly. "react-datepicker": "^0.53.0"

I will add, I use this component in three different webpack entry points on the same app, and in one of them it works fine. The main difference between the builds is one uses React Router 2 (calendar works properly) and the others use React Router 4 (calendar stays open). I'll have to look harder at that to see if that's part of the problem.

[honzajerabek]

Same here, trying to use <DatePicker /> as a label for a radio button

[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..

[blvdmitry]

+1, I have a label that wraps datepicker component. I use to let user click on a button near the datepicker and open the datepicker as clicking on label triggers focus on the inner input.

[adam-horvath]

My solution is a mix of the above mentioned ones.

<label onClick={e => this.calendar.state.open && e.preventDefault()}>
    <DatePicker
        ref={r => this.calendar = r}
        selected={this.props.filter.date}
        onChange={this.onDateChange}
        dropdownMode={'select'}
        isClearable={true}
        placeholderText={Constants.DATE_FILTER_PLACEHOLDER}
    />
    <div className="calendar-icon" style={{display : this.props.filter.date ? 'none' : 'block'}}/>
</label>

[frizar]

Hello! Any news? This bug still doesn't fixed :(

[chetan-jain]

Facing same problem, putting datepicker inside label causing it to not close on date/time selection. Works fine when used outside of label.

[waheedsid]

Has anyone got a solution to this problem yet? my problem is I cant use this.calender or ref as mentioned in above solutions because my label is inside a stateless component.

[adam-horvath]

@waheedsid, I think my solution will work if you refactor your component to stateful.

[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}
      />
    );
  }
}
...

[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.

[steve-taylor]

Rather than calling preventDefault() when the date picker is open, call it when the label content isn't clicked on directly. That way, you don't lose any of the functionality of labels.

const labelContentRef = useRef(null)
const onClickLabel = useCallback(
    event => {
        if (event.nativeEvent.target !== labelContentRef.current) {
            event.preventDefault()
        }
    },
    []
)

return (
    <label onClick={onClickLabel}>
        <span ref={labelContentRef}>
            {label}
        </span>
        <DatePicker
            // props go here...
        />
    </label>
)

Note that, in my case, the span is styled to occupy the full width of the label, so clicking anywhere inside the label, except for the labelled element itself, passes focus to the focusable labelled element.