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

[copperseed]

Before you start - checklist

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

Description

Somewhat related to https://github.com/wojtekmaj/react-date-picker/issues/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;

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[nicoletailiuha]

Same issue and for me it happens on Safari but works fine on Chrome.

[jmorey28]

Able to reproduce with Radix dialog as well, clicking on a month or a year just closes the date picker. Code sandbox example: https://codesandbox.io/p/devbox/fervent-boyd-cv8zjh

adding event.preventDefault(); to the onOutsideAction function fixes it but may not be ideal for some implementations, the main issue seems to be that the modal pulls focus off of the calendar when a month is clicked, removing the focusin event listener also fixes the issue, but still moves focus to the modal, which essentially has the same effect of @judsonjuniorr workaround