Description

React DatePicker version

8.3.0

React version

19.x

Current Behavior

When the DatePicker calendar is open and the user clicks on a third-party component that calls event.stopPropagation() during a mousedown event (such as react-select), the calendar remains open.

Clicking elsewhere on the page correctly closes the calendar.

Expected Behavior

The calendar should close whenever the user clicks outside the DatePicker, regardless of whether the clicked element stops event propagation.

Reproduction Steps

1. Render a DatePicker and a react-select component on the same page.
2. Open the DatePicker calendar.
3. Click on the react-select dropdown.
4. Observe that the calendar remains open.
5. Expected: The calendar should close.

Root Cause Analysis

React DatePicker appears to detect outside clicks using a document-level mousedown listener:

document.addEventListener("mousedown", handleClickOutside);

This relies on the mousedown event bubbling up to the document.

However, components such as react-select call:

event.stopPropagation();

inside their internal mousedown handlers, preventing the event from reaching the document-level listener.

For example, react-select contains logic similar to:

onMenuMouseDown = function (event) {
  event.stopPropagation();
  event.preventDefault();
  this.focusInput();
};

As a result, React DatePicker never detects the outside click and the calendar remains open.

Minimal Reproduction

import DatePicker from "react-datepicker";
import Select from "react-select";
import { useState } from "react";

const options = [
  { value: "one", label: "Option One" },
  { value: "two", label: "Option Two" },
];

export default function App() {
  const [date, setDate] = useState(null);

  return (
    <div style={{ padding: 40 }}>
      <div style={{ marginBottom: 20 }}>
        <label>Date Picker:</label>
        <DatePicker
          selected={date}
          onChange={setDate}
        />
      </div>

      <div>
        <label>React Select:</label>
        <Select options={options} />
      </div>
    </div>
  );
}

Additional Context

This issue is not specific to react-select. Any third-party component that calls stopPropagation() on mousedown can prevent React DatePicker from detecting outside clicks.

Examples may include:

• Custom dropdown components
• Rich text editors
• Drag-and-drop libraries
• Other UI libraries that intercept mousedown events