Skip to content

Improved reorderable lists for touch devices

Nick Leonard requested to merge nl-drag-delays into master

What does this MR do and why?

Improves reorderable lists for touch devices by adding a 100ms delay for touch devices only that prevents orderable items from dragging immediately, so that touch users can scroll without reordering.

Impacted features:

  • Epics > Child issues and epics tree
  • Issues > Tasks list
  • Work items > Child items tree
  • Issues list w/ manual sort

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Feature Before After
Epics > Child issues and epics tree epics-before.gif epicchild.gif
Issues > Tasks list tasks-before.gif tasks.gif
Work items > Child items tree workitemtree-before.gif workitemtree.gif
Issues list w/ manual sort issues-before.gif issuelist.gif

How to set up and validate locally

  1. Epics: Open an epic with 2+ children (or create child issues/epics) and reorder
  2. Tasks: Open an issue and create 2+ tasks
  3. Work item child items
    1. rails c then Feature.enable(:okrs_mvc)
    2. From the issues list, New issue dropdown select New objective to create an objective
    3. Open the Objective and create 2+ child objectives or KRs
  4. Issues list: Open the issues list, set sorting to "Manual"

In all cases the behavior on a non-touch device should be unchanged. Use something like Chrome DevTools device mode to emulate a touch device (or open on a touch device using the review app!).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #383462 (closed)

Edited by Nick Leonard

Merge request reports