Can't reorder rows on first drag in button handle on React Aria Table

[andynylon]

Provide a general summary of the issue here

When dragging the button handle in a table row nothing happens. When trying a second time the row is now draggable/reorderable. The button element has pointer-events: none; added as inline styles.
Dragging the row itself works fine, the bug is only when dragging the handle.

🤔 Expected Behavior?

To be able to drag and drop a table row in the first try. That works fine with GridList and Tree but not Table

😯 Current Behavior

When dragging the button handle in a table row nothing happens. When trying a second time the row is now draggable/reorderable. The button element has pointer-events: none; added as inline styles. If I set pointer-events: auto; as inline style it works fine.
Dragging the row itself works fine, the bug is only when dragging the handle.

See example here

💁 Possible Solution

Is the pointer-events: none; intended?

🔦 Context

Reordering table

🖥️ Steps to Reproduce

Drag the button handle. Now drag it again.

Version

1.20

What browsers are you seeing the problem on?

Microsoft Edge, Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[rothsandro]

The case would be handled by useGridCell by preventing the cell from receiving focus on pointerdown:

react-spectrum/packages/react-aria/src/grid/useGridCell.ts

Lines 368 to 387 in 434c91f

	// When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
	// row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
	// on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
	// To avoid this, remove the tabIndex from the cell briefly on pointer down.
	if (
	shouldSelectOnPressUp &&
	gridCellProps.tabIndex != null &&
	gridCellProps.onPointerDown == null
	) {
	gridCellProps.onPointerDown = e => {
	let el = e.currentTarget;
	let tabindex = el.getAttribute('tabindex');
	el.removeAttribute('tabindex');
	requestAnimationFrame(() => {
	if (tabindex != null) {
	el.setAttribute('tabindex', tabindex);
	}
	});
	};
	}

But the condition isn't true anymore because of the recently added onPointerDown handler for editable cells (#10159) in useSelectableItem:

react-spectrum/packages/react-aria/src/selection/useSelectableItem.ts

Lines 483 to 490 in 434c91f

	mergedItemProps.onPointerDown = e => {
	let target = getEventTarget(e) as Element | null;
	if (target && target !== ref.current && isChildInteraction(target)) {
	e.stopPropagation();
	return;
	}
	baseOnPointerDown?.(e);
	};

This can be reproduced by manually removing the tabindex="-1" from the cell before dragging it for the first time, then dragging works fine.

Maybe the gridCellProps.onPointerDown == null check can be removed, and any existing handler can be merged with the new one instead of overwriting it?

[bbratic]

Hi! I'd like to work on this issue if it's still available.

[rothsandro]

Hi! I'd like to work on this issue if it's still available.

OK for me, I'm not working on it. I don't know about andynylon / the RAC team...

[andynylon]

Hi! I'd like to work on this issue if it's still available.

Yeah man. I don't have time, but would appreciate a fix.

[LFDanLu]

@bbratic thanks, definitely feel free to take a look!

[reidbarber]

Related issue: #9739

As to why we have pointer-events: none here, I can't remember. Maybe related to the way usePress worked previously? Seems fine to remove if we test the change thoroughly.

[rothsandro]

Removing pointer-events: none isn't a reliable fix:

• If the user starts dragging on the drag button cell but outside the actual drag button (so on the padding of the cell), the issue is still there because of what I described above.
• The row no longer sets [aria-pressed] when pressing the drag button. If the row applies different styles for pressed state, these styles are not applied anymore and are also missing on the drag preview. In the RAC docs, odd rows don't have a background color by default but set a gray background on press. Without these pressed styles, the drag preview is transparent which looks really weird.