Dragged Item in GridList component disable button interaction

[armandabric]

Hey everyone,

I'm experimenting with drag and drop capabilities of the GridList component and after some try I succeed to have my nice draggable list. Well done guys 👍

I got stuck when I start to use our custom button component as drad handler. I discovered that the drag handler (slot="drag") got a style pointer-event: none; force on him.

react-spectrum/packages/react-aria-components/src/GridList.tsx

Lines 354 to 360 in d334cde

	drag: {
	...draggableItem?.dragButtonProps,
	ref: dragButtonRef,
	style: {
	pointerEvents: 'none'
	}
	}

I get the why: bubble up de the event to allow the Item to handle all the drag stuff). But the consequence is that the button hover/press state are not shown anymore witch is not nice at all for a design system.

With the DragList, is there a way to, at least, allow the drag handler adapt it appearance on hover/press? Or even better, only use the drag handler to trigger the drag (do not make the full Item draggable)?

I suppose I could do the latter by using directly the underlying hooks. But this will come with an higher maintenance cost.

Thanks for your help!

[snowystinger]

Because this is passed on the context from GridList to Button with slot drag. You could intercept it and just remove that piece. You'd need to make sure the button is always visible though and has a big enough hit area for a touch user.

simplified example derived from https://react-spectrum.adobe.com/react-aria/Button.html#advanced-customization

function MyDragButton (props, ref) {
  [props, ref] = useContextProps({...props, slot: 'drag'}, ref, ButtonContext);
  delete props.style;
  return <ButtonContext.Provider value={props}><Button /></ButtonContext.Provider>;
}

[armandabric]

Thanks to taking some time to help me.

I have already try to remove the style attribute with a solution equivalent of the one you propose. This will make the button interactive again, but the button does not a trigger a drag.

I've created a simple reproduction: https://codesandbox.io/p/sandbox/immutable-grass-pdffxz?file=%2Fsrc%2Fcomponents%2FSortableFileList.css.tsx%3A15%2C16

[snowystinger]

Ah, thanks for the codesandbox, that is quite helpful. I think that this would probably be considered a bug. I'll open an issue referencing this.

[snowystinger]

opened here #5279