fix: render selected days with selected modifier when disabled

examples/DisabledSelectedDate.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { gridcell } from "@/test/elements";
+import { render } from "@/test/render";
+
+import { DisabledSelectedDate } from "./DisabledSelectedDate";
+
+test("selected days should render with 'selected' modifier when disabled", () => {
+  render(<DisabledSelectedDate />);
+
+  const dayBeforeRangeStart = new Date(2025, 2, 7);
+  expect(gridcell(dayBeforeRangeStart, true)).not.toHaveClass("rdp-selected");
+  expect(gridcell(dayBeforeRangeStart, true)).not.toHaveStyle(
+    "background-color: red"
+  );
+  const rangeStart = new Date(2025, 2, 8);
+  expect(gridcell(rangeStart, true)).toHaveClass("rdp-selected");
+  expect(gridcell(rangeStart, true)).toHaveStyle("background-color: red");
+
+  rangeStart.setDate(rangeStart.getDate() + 1);
+  expect(gridcell(rangeStart, true)).toHaveClass("rdp-selected");
+  expect(gridcell(rangeStart, true)).toHaveStyle("background-color: red");
+
+  rangeStart.setDate(rangeStart.getDate() + 1);
+  expect(gridcell(rangeStart, true)).toHaveClass("rdp-selected");
+  expect(gridcell(rangeStart, true)).toHaveStyle("background-color: red");
+
+  rangeStart.setDate(rangeStart.getDate() + 1);
+  expect(gridcell(rangeStart, true)).toHaveClass("rdp-selected");
+  expect(gridcell(rangeStart, true)).toHaveStyle("background-color: red");
+
+  rangeStart.setDate(rangeStart.getDate() + 1);
+  expect(gridcell(rangeStart, true)).not.toHaveClass("rdp-selected");
+  expect(gridcell(dayBeforeRangeStart, true)).not.toHaveStyle(
+    "background-color: red"
+  );
+});

examples/DisabledSelectedDate.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+const today = new Date(2025, 2, 8);
+const toDate = new Date(today);
+toDate.setDate(toDate.getDate() + 3);
+
+/**
+ * Test case for issue #2699
+ *
+ * @see https://github.com/gpbl/react-day-picker/issues/2699
+ */
+export function DisabledSelectedDate() {
+  return (
+    <DayPicker
+      mode="range"
+      disabled
+      today={today}
+      modifiersStyles={{
+        selected: {
+          backgroundColor: "red"
+        }
+      }}
+      selected={{
+        from: today,
+        to: toDate
+      }}
+    />
+  );
+}

examples/TestCase2047.test.tsx

@@ -10,8 +10,8 @@ beforeEach(async () => {
   render(<TestCase2047 />);
 });
 
-test("disabled date is not selected", () => {
-  expect(gridcell(new Date(2024, 5, 10), true)).not.toHaveAttribute(
+test("disabled date renders with selected modifier", () => {
+  expect(gridcell(new Date(2024, 5, 10), true)).toHaveAttribute(
     "aria-selected"
   );
 });

examples/index.ts

@@ -18,6 +18,7 @@ export * from "./CustomWeek";
 export * from "./DefaultMonth";
 export * from "./Dialog";
 export * from "./Disabled";
+export * from "./DisabledSelectedDate";
 export * from "./DisableNavigation";
 export * from "./Dropdown";
 export * from "./DropdownMonths";

src/DayPicker.tsx

@@ -480,8 +480,7 @@ export function DayPicker(props: DayPickerProps) {
                               Boolean(focused?.isEqualTo(day));
 
                             modifiers[SelectionState.selected] =
-                              !modifiers.disabled &&
-                              (isSelected?.(date) || modifiers.selected);
+                              isSelected?.(date) || modifiers.selected;
 
                             if (isDateRange(selectedValue)) {
                               // add range modifiers