feat(planner): clicking the selected day header again deselects it

Same effect as the day panel's close button: selection cleared and the
day detail panel closed. Discussed in #2024.
This commit is contained in:
cartoone
2026-08-23 22:08:42 +02:00
committed by Maurice
parent 1cb67d5e64
commit b5c8182410
2 changed files with 14 additions and 2 deletions
@@ -370,6 +370,17 @@ describe('DayPlanSidebar', () => {
expect(onSelectDay).toHaveBeenCalledWith(10)
})
it('FE-PLANNER-DAYPLAN-209: clicking the selected day header again deselects it', async () => {
const user = userEvent.setup()
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
const onSelectDay = vi.fn()
const onDayDetail = vi.fn()
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10, onSelectDay, onDayDetail })} />)
await user.click(screen.getByText('My Day'))
expect(onSelectDay).toHaveBeenCalledWith(null)
expect(onDayDetail).toHaveBeenCalledWith(null)
})
it('FE-PLANNER-DAYPLAN-010: selectedDayId renders without error', () => {
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10 })} />)
@@ -65,7 +65,7 @@ interface DayPlanSidebarProps {
selectedAssignmentId: number | null
onSelectDay: (dayId: number | null, skipFit?: boolean) => void
onPlaceClick: (placeId: number | null, assignmentId?: number | null) => void
onDayDetail: (day: Day) => void
onDayDetail: (day: Day | null) => void
accommodations?: Accommodation[]
onReorder: (dayId: number, orderedIds: number[]) => void
onReorderDays?: (orderedIds: number[]) => void
@@ -1579,7 +1579,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
<div
className="dp-day-header"
data-selected={isSelected}
onClick={() => { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) }}
// Clicking the selected day again deselects it — same as the day panel's × (#2024).
onClick={() => { if (isSelected) { onSelectDay(null); if (onDayDetail) onDayDetail(null) } else { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) } }}
onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setDragOverDayId(null) }}
onDrop={e => handleDropOnDay(e, day.id)}