From 05ecbbbdf414b66302de23c743cfdfc5cfca1ed0 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Thu, 25 Jun 2026 16:43:08 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(range-datepicker):=20Prevent?=
 =?UTF-8?q?=20inline=20mode=20from=20resetting=20selection=20on=20handleSe?=
 =?UTF-8?q?lect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avoid calling setOpen(false) inside handleSelect when the datepicker is in inline mode. Inline pickers do not close, but triggering setOpen(false) causes a focus reset that switches selection back to startDate, effectively losing the current range selection.

This change ensures that inline range pickers preserve the active selection state while maintaining existing behavior for non-inline modes.

Fixes #6294
---
 src/index.tsx                     |  6 ++++-
 src/test/datepicker_test.test.tsx | 42 +++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 05fde7b81..b41a33648 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -894,7 +894,11 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
     if (this.props.showDateSelect) {
       this.setState({ isRenderAriaLiveMessage: true });
     }
-    if (!this.props.shouldCloseOnSelect || this.props.showTimeSelect) {
+    if (
+      !this.props.shouldCloseOnSelect ||
+      this.props.inline ||
+      this.props.showTimeSelect
+    ) {
       this.setPreSelection(date);
     } else if (isDateSelectionComplete) {
       this.setOpen(false);
diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index 31b239b37..fef9b79b3 100644
--- a/src/test/datepicker_test.test.tsx
+++ b/src/test/datepicker_test.test.tsx
@@ -3738,6 +3738,48 @@ describe("DatePicker", () => {
         formatDate(selected, "yyyy-MM-dd"),
       );
     });
+
+    it("should not reset the preSelectedDate to startDate after selecting the endDate", async () => {
+      const selectedDate = newDate("2026-06-01");
+      const selectedDay = selectedDate.getDate();
+      let startDate, endDate;
+      const onChange = (dates: [Date | null, Date | null]) => {
+        startDate = dates[0] ?? null;
+        endDate = dates[1] ?? null;
+      };
+
+      const { container } = render(
+        <DatePicker
+          selected={selectedDate}
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          inline
+        />,
+      );
+
+      const startDayClassName = `.react-datepicker__day--0${selectedDay < 10 ? "0" + selectedDay : selectedDay}`;
+      const selectedDayEl = safeQuerySelector(
+        container,
+        `${startDayClassName}.react-datepicker__day--selected`,
+      );
+      await userEvent.click(selectedDayEl);
+
+      const expectedEndDate = selectedDay + 2;
+      await userEvent.keyboard(
+        `${Array(expectedEndDate - selectedDay).fill(`{${KeyType.ArrowRight}}`)}{${KeyType.Enter}}`,
+      );
+
+      const endDayEl = safeQuerySelector(
+        container,
+        ".react-datepicker__day--keyboard-selected",
+      );
+
+      const expectedEndDayClassName = `react-datepicker__day--0${expectedEndDate < 10 ? "0" + expectedEndDate : expectedEndDate}`;
+
+      expect(endDayEl.classList.contains(expectedEndDayClassName)).toBe(true);
+    });
   });
 
   describe("is-selecting-range", () => {