Dev-Mode: Virtualized dnd aborts when autoscrolling focusedKey into view

[nwidynski]

Provide a general summary of the issue here

In dev builds, the virtualized dnd aborts when autoscrolling the focusedKey out of view and then back into view again. This issue does not exist on production builds, such as the deployed version of our storybook.

🤔 Expected Behavior?

DnD should be behave the same in dev as in production.

😯 Current Behavior

State becomes stale and indicators vanish when scrolling the focusedKey back into view.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Open "Virtualized ListBox DnD" story in the LOCAL storybook
2. Start drag interaction with keyboard or mouse
3. Scroll the focusedKey out of view by moving the drag indicator, causing autoscroll
4. Scroll the focusedKey back into view, which causes the indicator to vanish and state to be stale

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

This appears to be related to React StrictMode, I disabled it in the local build of storybook and it works as expected.

[devongovett]

I think possibly related to this React 19 bug: facebook/react#29585

The layout effect cleanup is getting called here:

react-spectrum/packages/@react-aria/dnd/src/useDrag.ts

Lines 243 to 261 in 358680d

	useLayoutEffect(() => {
	return () => {
	if (isDraggingRef.current) {
	if (typeof state.options.onDragEnd === 'function') {
	let event: DragEndEvent = {
	type: 'dragend',
	x: 0,
	y: 0,
	dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect || 'none']
	};
	state.options.onDragEnd(event);
	}
	setDragging(false);
	setGlobalAllowedDropOperations(DROP_OPERATION.none);
	setGlobalDropEffect(undefined);
	}
	};
	}, [state]);