[Due for payment 2025-05-28] [$250] Distance - User able to drag start and Stop way points across the page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: V9.1.4-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap fab- distance
3. Try to drag start and stop points across the page up and down

Expected Result:

User must not be able to drag start and Stop way points across the page.

Actual Result:

User able to drag start and Stop way points across the page.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6751415_1740294960877.Screenrecorder-2025-02-23-12-40-12-134.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894432368976677960
• Upwork Job ID: 1894432368976677960
• Last Price Increase: 2025-04-01
• Automatic offers:
• davidgelhar | Contributor | 106791711

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021894432368976677960

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hoangzinh (External)

[davidgelhar]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-27 11:56:21 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

When entering a 'distance' expense, the 'start' and 'stop' buttons can be dragged all over the screen. It should be possible to drag them to re-order the buttons, but not to drag them outside their container.

What is the root cause of that problem?

The DraggableList component is implemented using react-beautiful-dnd, which does not provide a built-in mechanism to limit where the objects can be dragged.

What changes do you think we should make in order to solve the problem?

react-beautiful-dnd does not provide the needed functionality, and is about to be deprecated (on Apr 30, 2025), so a replacement is needed.

Proposed solution: replace react-beautiful-dnd with dndkit.
DNDkit does provide options to:

• Restrict motion to vertical axis only
• Restrict movement to the parent element

Fortunately, DraggableList is the only component that uses react-beautiful-dnd, and it is used only for this one purpose: to drag/sort the waypoints in IOURequestStepDistance. That means we can update the implementation of dragging for this one component without risk of breaking things elsewhere in the app.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add a test for the Draggable component that tries to move it outside the bounds of its parent; verify the the final position is kept within the bounds.

What alternative solutions did you explore? (Optional)

First attempt was:

In the code for the Draggable component within DraggableList/index.tsx, look at the transform property on draggableProvided, and update it so that the horizontal translation is always 0 (drag up & down only, not side-to-side), and the vertical translation is constrained by the Dropable box size.

This attempt did not provide smooth performance, and does not address the issue of react-beautiful-dnd begin deprecated.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[hoangzinh]

Hi @davidgelhar thank you for posting the proposal. Please don't forget to update "What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?" section (ref Slack thread). Besides that, do you have a branch to test? I'm still unclear how to leverage draggableProvided to solve this issue.

[davidgelhar]

Hi @hoangzinh, the proposal has been updated to include a suggestion for a new test to add.

I don't yet have a branch to test, but here's an example of how draggableProvided could be used. In this example, it's preventing any side-to-side movement. We would also need to do additional calculations to constrain the up & down motion to the size of the containing element.

 const transform = draggableProvided.draggableProps?.style?.transform;
    if (transform) {  
      const y = transform.split(',')[1];     
      // set x value to zero - no horizontal motion allowed
      draggableProvided.draggableProps.style.transform = `translate(0px,${y}`;
    }