mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user