-
-
Notifications
You must be signed in to change notification settings - Fork 195
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clicking anywhere that is not an active button when placed in react-modal triggers outsideAction and closes the calendar #640
Comments
+1. Worse when using |
One workaround I found that did the job for me: <ReactDatePicker
inputRef={ref => {
ref?.setAttribute('tabindex', '0');
}}
/> |
Having the same issue, workaround not working for me :( |
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; |
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. |
Same issue and for me it happens on Safari but works fine on Chrome. |
Able to reproduce with Radix dialog as well, clicking on a month or a year just closes the date picker. adding |
Before you start - checklist
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
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
The text was updated successfully, but these errors were encountered: