title: React-datepicker | Calendar not closing on selection of date
body: <p>I've seen this <a href="https://github.com/Hacker0x01/react-datepicker/issues/1012#" rel="nofollow noreferrer">issue</a> but it doesn't seem to offer any solution to my problem.</p>
  <p>Recently I picked up a project that uses <code>react-datepicker</code> and there's an issue where the calendar just isn't closing on selection of a date. Here's a gif showcasing that</p>
  <p><img src="https://user-images.githubusercontent.com/30603437/93449507-bca26e80-f8cc-11ea-8ff4-44d3878d3829.gif" alt="reactdatepicker" /></p>
  <p>My DatePicker component is here</p>
  <pre><code>const DatePicker: FC&lt;Props&gt; = ({
    label,
    icon,
    date,
    onChange,
    minDate,
    maxDate,
    selectsStart,
    selectsEnd,
  }) =&gt; {
    const dateObj = useMemo(() =&gt; (date ? date.toDate() : null), [date])
    const minDateObj = useMemo(() =&gt; (minDate ? minDate.toDate() : null), [
      minDate,
    ])
    const maxDateObj = useMemo(() =&gt; (maxDate ? maxDate.toDate() : null), [
      maxDate,
    ])
  
    return (
      &lt;div className={css.host}&gt;
        &lt;div className={css.label}&gt;{label}&lt;/div&gt;
        &lt;label className={`${css.wrapper}`}&gt;
          {icon}
          &lt;ReactDatePicker
            selected={dateObj}
            className={css.input}
            calendarClassName={css.calendar}
            showTimeSelect
            dateFormat=&quot;dd/MM/yyyy h:mm aa&quot;
            onChange={(newDate: Date, e) =&gt; {
              if (newDate) {
                const momentDate = moment(newDate)
                onChange(momentDate)
              }
            }}
            startDate={minDateObj}
            endDate={maxDateObj}
            minDate={minDateObj}
            maxDate={maxDateObj}
            selectsStart={selectsStart}
            selectsEnd={selectsEnd}
            showPopperArrow={false}
            popperModifiers={{
              offset: {
                enabled: true,
                offset: '-28px, 4px',
              },
            }}
            renderCustomHeader={customHeader}
          /&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>And it's being used here</p>
  <pre><code>&lt;div
        className={css.host}
        onKeyUp={(evt) =&gt; {
          if (evt.keyCode === 13) {
            onSearch({ startDate, endDate, text })
          }
        }}
      &gt;
        &lt;DatePicker
          id=&quot;startDate&quot;
          label=&quot;Start date&quot;
          icon={&lt;DateStartIcon width={16} height={16} /&gt;}
          date={startDate}
          maxDate={endDate}
          onChange={(newDate: Moment) =&gt; {
            setStartDate(newDate)
          }}
          selectsStart
        /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Inside my <code>ReactDatePicker</code> I tried to set the <code>onChange</code> like so</p>
  <pre><code>onChange={(newDate: Date, e) =&gt; {
      if (newDate) {
          if (e &amp;&amp; typeof e.preventDefault === 'function') {
              e.preventDefault();
          }
          const momentDate = moment(newDate)
          onChange(momentDate)
      }
  }}
  </code></pre>
  <p>I'm not sure what else I can do here so any help would be great!</p>