Merge pull request #6179 from Hacker0x01/fix/prevent-close-on-click-outside

feat: allow onClickOutside to prevent calendar from closing

Author: martijnrusschen

src/index.tsx

@@ -717,10 +717,13 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
   };
 
   handleCalendarClickOutside = (event: MouseEvent) => {
-    if (!this.props.inline) {
+    // Call user's onClickOutside first, allowing them to call preventDefault()
+    this.props.onClickOutside?.(event);
+
+    // Only close if not prevented and not inline
+    if (!this.props.inline && !event.defaultPrevented) {
       this.setOpen(false);
     }
-    this.props.onClickOutside?.(event);
     if (this.props.withPortal) {
       event.preventDefault();
     }

src/test/datepicker_test.test.tsx

@@ -2793,6 +2793,28 @@ describe("DatePicker", () => {
     expect(onClickOutsideSpy).toHaveBeenCalledTimes(1);
   });
 
+  it("should not close date picker when onClickOutside calls preventDefault", () => {
+    const onClickOutside = (event: MouseEvent) => {
+      event.preventDefault();
+    };
+    const { container } = render(
+      <div>
+        <span className="outsideElement">outside</span>
+        <DatePicker onClickOutside={onClickOutside} />
+      </div>,
+    );
+
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
+    expect(container.querySelector(".react-datepicker")).not.toBeNull();
+
+    const outsideElement = safeQuerySelector(container, ".outsideElement");
+    fireEvent.mouseDown(outsideElement);
+
+    // Calendar should remain open because preventDefault was called
+    expect(container.querySelector(".react-datepicker")).not.toBeNull();
+  });
+
   it("should not close date picker on input click", () => {
     const onClickOutsideSpy = jest.fn();
     const { container } = render(