The `selected` prop is not working without setting `onSelect`
Author: jiwon79Created Feb 28, 2025Updated Apr 8, 2025
Labelsbreaking change
To reproduce
stackblitz Link: https://stackblitz.com/edit/vitejs-vite-rdyvfyjg?file=src%2FApp.tsx
import { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
const DAY_IN_MS = 24 * 60 * 60 * 1000;
function App() {
const [range, setRange] = useState({
from: new Date(),
to: new Date(),
});
const changerPrev = () => {
setRange({
from: new Date(range.from.getTime() - DAY_IN_MS),
to: range.to,
});
};
return (
<>
<button onClick={() => changerPrev()}>prev</button>
{/* it doesn't work */}
<DayPicker mode="range" selected={range} />
{/* it work */}
<DayPicker mode="range" selected={range} onSelect={() => void 0} />
</>
);
}
export default App;Actual Behavior
In the first case, the selected value does not change. In the second case, the selected value changes.
Expected Behavior
In both the first and second cases, the selected value should change.
Screenshots
Source: gpbl/react-day-picker