Distance - Waypoint automatically moves to bottom and remains selected when dragged

[jponikarchuk]

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.2.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2626/folder/13176744/41237146/1103226507
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Android
App Component: Chat Report View

Action Performed:

1. Open the app on an account that is part of a workspace
2. Click on FAB
3. Click on the "Track Distance" > "Map"
4. Add this three waypoints: "45n N Beach Rd, FL", "Beach Access Path, Sunny Isles Beach, FL", "Pembroke Pines, FL, USA"
5. Drag and drop the middle stop to make it the finish location.
6. Verify the map updates to display a new route with the new destination order
7. Drag and drop the middle stop to make it the finish location.
   Result: The stop moves automatically to the bottom and it remains selected when the user is not tapping the screen.
8. Verify the map updates to display a new route with the new destination order.
   Result: The map view is not update until the user tap again the screen to move the stop.

Expected Result:

When the user taps a waypoint, it should become selected and allow the user to drag it to the desired position. The waypoint should not automatically move to the bottom and should be deselected once the interaction ends.

Actual Result:

When the user taps a waypoint to drag it, the stop is automatically moved to the bottom of the list. Additionally, the waypoint remains selected even after the user stops interacting with it. The map view is not update until the user tap again the screen to move the stop.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @heyjennahay (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.

[samranahm]

Proposal

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

When a user drags a waypoint in the distance tracking feature on Android, the waypoint automatically moves to the bottom of the list and remains in a selected state even after the user releases it. Additionally, the map view does not update to reflect the new route until the user taps the screen again.

What is the root cause of that problem?

The root cause is a conflict between two mechanisms:

1. Auto-scroll behavior: When waypoints are added or the number of waypoints increases, a useEffect hook automatically scrolls the list to the end (scrollToEnd).
2. Drag completion timing: When a user drags a waypoint, the onDragEnd callback updates the waypoints, which triggers a re-render and increases the waypoint count temporarily (before the empty waypoint is removed). This triggers the auto-scroll effect, causing the viewport to jump to the bottom while the drag operation is still being processed.

The active/selected state (isActive) remains true because the DraggableFlatList library doesn't immediately clear the active state when the drag operation is interrupted by the auto-scroll.

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

1. Add an isDragging ref flag to track when a drag operation is in progress
2. Check this flag in the auto-scroll useEffect to prevent scrolling during active drag operations
3. Set isDragging.current = true at the start of the updateWaypoints function
4. Reset isDragging.current = false after the waypoint update Promise completes

  const isDragging = useRef(false);

  useEffect(() => {
      if (numberOfWaypoints <= numberOfPreviousWaypoints || isDragging.current) {
          return;
      }
      scrollViewRef.current?.scrollToEnd({animated: true});
  }, [numberOfPreviousWaypoints, numberOfWaypoints]);

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 230 to 236 in f7265ef

	useEffect(() => {
	if (numberOfWaypoints <= numberOfPreviousWaypoints) {
	return;
	}
	scrollViewRef.current?.scrollToEnd({animated: true});
	}, [numberOfPreviousWaypoints, numberOfWaypoints]);

and in IOURequestStepDistanceMap

This prevents the auto-scroll from triggering while dragging, allowing the drag-and-drop to complete naturally without interference. The map will update properly because the waypoint reordering will trigger the normal update flow without the viewport jumping to the bottom.

What alternative solutions did you explore? (Optional)

Modify the DraggableFlatList component to disable auto-scroll entirely during drag operations, but this would be a more complicated change affecting the third-party library behavior.

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.

[lorretheboy]

Proposal

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

Distance - Waypoint automatically moves to bottom and remains selected when dragged

What is the root cause of that problem?

DraggableList doesn't properly track and expose the dragging state to rendered items. Specifically:

The component uses useSortable hook which provides an isDragging property, but this state is never exposed to the children components.

App/src/components/DraggableList/SortableItem.tsx

Line 7 in 1450328

const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id, disabled});

In the DraggableList, isActive prop is hardcoded to false when calling renderItem, meaning items never receive information about whether they're currently being dragged.

App/src/components/DraggableList/index.tsx

Lines 62 to 67 in 654bde2

	{renderItem({
	item,
	getIndex: () => index,
	isActive: false,
	drag: () => {},
	})}

Therefore, waypoints not showing visual feedback (active/focused state) during dragging and focused state not being properly cleared when the drag ends ---> causing items to appear stuck in a selected state

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

1. Update SortableItem component to extract the isDragging property from useSortable and pass it to the rendered children via a render prop pattern.

-function SortableItem({id, children, disabled = false}: SortableItemProps) {
-    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id, disabled});
+function SortableItem({id, children, disabled = false, renderItem}: SortableItemProps) {
+    const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({id, disabled});
 
     const style = {
         touchAction: 'none',
@@ -21,7 +21,7 @@ function SortableItem({id, children, disabled = false}: SortableItemProps) {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...(disabled ? {} : listeners)}
         >
-            {children}
+            {renderItem ? renderItem(isDragging) : children}
         </div>
     );
 }

App/src/components/DraggableList/SortableItem.tsx

Line 6 in 1450328

function SortableItem({id, children, disabled = false}: SortableItemProps) {

2. Update SortableItemProps type to include an optional renderItem callback function that receives the isDragging boolean state.

 type SortableItemProps = {
     id: string | number;
-    children: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode | React.ReactNode[];
     /** Whether dragging is disabled for this item */
     disabled?: boolean;
+    /** Optional render function that receives isDragging state */
+    renderItem?: (isDragging: boolean) => React.ReactNode;
 };
 
 export default DraggableListProps;

App/src/components/DraggableList/types.ts

Line 29 in 6ba4e7a

type SortableItemProps = {

3. Update DraggableList component to use the new render prop pattern, passing the isDragging state as the isActive prop to the renderItem function.

@@ -58,14 +58,15 @@ function DraggableList<T>({
                 id={key}
                 key={key}
                 disabled={isDisabled}
-            >
-                {renderItem({
-                    item,
-                    getIndex: () => index,
-                    isActive: false,
-                    drag: () => {},
-                })}
-            </SortableItem>
+                renderItem={(isDragging) =>
+                    renderItem({
+                        item,
+                        getIndex: () => index,
+                        isActive: isDragging,
+                        drag: () => {},
+                    })
+                }
+            />
         );
     });

App/src/components/DraggableList/index.tsx

Line 19 in 654bde2

function DraggableList<T>({

What alternative solutions did you explore? (Optional)

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.

[tsa321]

Proposal

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

The waypoint jumps to the bottom when a user starts dragging it.

What is the root cause of that problem?

In the step distance map page:

App/src/pages/iou/request/step/IOURequestStepDistanceMap.tsx

Lines 589 to 590 in 60519c9

	<DraggableList
	data={waypointsList}

The data for the DraggableList remains the same even after the user reorders the waypoints:

App/src/pages/iou/request/step/IOURequestStepDistanceMap.tsx

Line 123 in 60519c9

const waypointsList = Object.keys(waypoints);

The waypointsList will always be, for example: [waypoint0, waypoint1, waypoint2, waypoint3, …]

Since on Android we use react-native-draggable-flatlist, we must update the item order in the list after user reorder the waypoint.

For example, if a user moves waypoint1 to the position of waypoint3, the order should become:
[waypoint0, waypoint2, waypoint3, waypoint1].

If we don’t update this order, the data remains [waypoint0, waypoint1, waypoint2, waypoint3]. When the user starts dragging the second item, it will jump to the bottom because waypoint1 was placed at the bottom in the previous update.

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

Since we need to update the waypoint order, we could rely on the waypoint values themselves instead of using keys like waypoint0 for the draggableList data

we could add useMemo:

const allitems = useMemo(() => {
    const items = []
    for (let i = 0; i < numberOfWaypoints; i++) {
        items.push(waypoints[`waypoint${i}`]);
    }
    return (items);
}, [waypoints, numberOfWaypoints])

then use it in:

<DraggableList
         data={allitems}

If we’re concerned about performance because allItems includes all data, we could use the keyForList value instead of all waypoints data.

Then, adjust the code that consumes the item accordingly.

The adjusted code could be:

--- a/src/pages/iou/request/step/IOURequestStepDistanceMap.tsx
+++ b/src/pages/iou/request/step/IOURequestStepDistanceMap.tsx
@@ -474,16 +474,24 @@ function IOURequestStepDistanceMap({
         data: string[];
     };
 
+    const allitems = useMemo(() => {
+        const items = [] 
+        for (let i = 0; i < numberOfWaypoints; i++) {
+            items.push(waypoints[`waypoint${i}`]);
+        }
+        return(items);
+    }, [waypoints, numberOfWaypoints])
+
     const updateWaypoints = useCallback(
         ({data}: DataParams) => {
-            if (deepEqual(waypointsList, data)) {
+            if (deepEqual(allitems, data)) {
                 return;
             }
 
             const newWaypoints: WaypointCollection = {};
             let emptyWaypointIndex = -1;
             for (const [index, waypoint] of data.entries()) {
-                newWaypoints[`waypoint${index}`] = waypoints[waypoint] ?? {};
+                newWaypoints[`waypoint${index}`] = waypoint ?? {};
                 // Find waypoint that BECOMES empty after dragging
                 if (isWaypointEmpty(newWaypoints[`waypoint${index}`]) && !isWaypointEmpty(waypoints[`waypoint${index}`])) {
                     emptyWaypointIndex = index;
@@ -498,7 +506,7 @@ function IOURequestStepDistanceMap({
                 setOptimisticWaypoints(null);
             });
         },
-        [transactionID, transaction, waypoints, waypointsList, action],
+        [transactionID, transaction, waypoints, waypointsList, action, allitems],
     );
 
     const submitWaypoints = useCallback(() => {
@@ -565,7 +573,7 @@ function IOURequestStepDistanceMap({
         ({item, drag, isActive, getIndex}: RenderItemParams<string>) => (
             <DistanceRequestRenderItem
                 waypoints={waypoints}
-                item={item}
+                item={item.keyForList}
                 onSecondaryInteraction={drag}
                 isActive={isActive}
                 getIndex={getIndex}
@@ -576,6 +584,8 @@ function IOURequestStepDistanceMap({
         [isLoadingRoute, navigateToWaypointEditPage, waypoints],
     );
 
     return (
         <StepScreenWrapper
             headerTitle={translate('common.distance')}
@@ -587,8 +597,8 @@ function IOURequestStepDistanceMap({
             <>
                 <View style={styles.flex1}>
                     <DraggableList
-                        data={waypointsList}
-                        keyExtractor={(item) => (waypoints[item]?.keyForList ?? waypoints[item]?.address ?? '') + item}
+                        data={allitems}
+                        keyExtractor={(item, number) => (item.keyForList ?? item?.address ?? '') + `waypoint${number}`}
                         onDragEnd={updateWaypoints}
                         ref={scrollViewRef}
                         renderItem={renderItem}

Result:

test_d.mp4

What alternative solutions did you explore? (Optional)

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.