Clicking anywhere that is not an active button when placed in react-modal triggers outsideAction and closes the calendar

[copperseed]

Before you start - checklist

• I followed instructions in documentation written for my React-Date-Picker version
• I have checked if this bug is not already reported

Description

Somewhat related to #636. The issue occurs when using the react-modal package and placing the date picker in a modal. On opening of the calendar, the buttons in the calendar wrapper all function as they should but clicking anywhere else in the calendar wrapper including disabled calendar tiles and disabled buttons triggers an outsideAction and therefore closes the calendar.

Steps to reproduce

1. Install react-modal
2. Create a modal
3. Place a datepicker input into the modal
4. Open the datepicker calendar
5. Click anywhere but on an active button
6. Datepicker closes with outsideAction

Expected behavior

Expecting the calendar not to close when clicking anywhere in the calendar area.

Actual behavior

Calendar closes when clicking anywhere in the calendar area that is not an active button .

Additional information

No response

Environment

• Browser (if applicable):
• React-Date-Picker version: Latest
• React version: 17.0.2

[tjhart]

+1.

Worse when using react-bootstrap/Modal All buttons (calendar days, calendar navigation, etc) trigger outsideAction

[JoaoVSouto]

One workaround I found that did the job for me:

<ReactDatePicker
  inputRef={ref => {
    ref?.setAttribute('tabindex', '0');
  }}
/>

[sergioUjo]

Having the same issue, workaround not working for me :(

[judsonjuniorr]

Had the same issue here, I'm using this workaround:

import 'react-date-picker/dist/DatePicker.css';
import 'react-calendar/dist/Calendar.css';

import { useRef, useState } from 'react';
import DatePickerComponent from 'react-date-picker';
import { useOnClickOutside } from 'usehooks-ts';

const DatePicker = () => {
  const [calendarOpen, setCalendarOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  const handleClickOutside = () => {
    if (calendarOpen) {
      setCalendarOpen(false);
    }
  };
  useOnClickOutside(ref, handleClickOutside);


  return (
    <DatePickerComponent
      inputRef={ref}
      isOpen={calendarOpen}
      shouldCloseCalendar={e => e.reason !== 'outsideAction'}
      onCalendarOpen={() => {
        setCalendarOpen(true);
      }}
      onCalendarClose={() => {
          setCalendarOpen(false);
      }}
    />
  );
};

export default DatePicker;