fix(planner): reach the day reorder popup with a finger too

The popup is a modal, so it portals out of the sidebar and misses the
opt-in its rows sit inside everywhere else. Its rows already carried a bare
draggable attribute, which on a tablet meant a long press selected the row
label and nothing moved.
This commit is contained in:
Maurice
2026-07-29 18:06:51 +02:00
committed by Maurice
parent edea67ff7e
commit 397f504d01
2 changed files with 29 additions and 1 deletions
@@ -3836,4 +3836,29 @@ describe('reordering the day plan with a finger (#1616)', () => {
teardown()
}
})
// The reorder popup renders inside the sidebar, so it inherits the opt-in and
// its day rows become draggable by finger too. Pinned so it stays deliberate.
it('FE-PLANNER-DAYPLAN-191: a long press reorders days in the reorder popup', async () => {
const onReorderDays = vi.fn().mockResolvedValue(undefined)
const days = [
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
]
render(<DayPlanSidebar {...makeDefaultProps({ days, onReorderDays, onAddDay: vi.fn() })} />)
fireEvent.click(screen.getByLabelText('Reorder days'))
const teardown = installTouchDragBridge()
try {
const rows = document.querySelectorAll('[draggable="true"]')
const from = [...rows].find(r => r.textContent?.includes('Day 1'))!
const to = [...rows].find(r => r.textContent?.includes('Day 3'))!
expect(from.closest('[data-touch-drag]')).not.toBeNull()
await longPress(from)
dragTo(to)
await waitFor(() => expect(onReorderDays).toHaveBeenCalled())
} finally {
teardown()
}
})
})
@@ -85,7 +85,10 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
{t('dayplan.reorderHint')}
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
{/* The popup is a modal, so it portals out of the planner and has to opt
into the long-press drag itself (#1616). Without this a finger only
selects the row text. */}
<div data-touch-drag style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
{ordered.map((day, index) => (
<div
key={day.id}