Unable to set CSS cursor on sortable helper

Any CSS cursor property is ignored on the sortable helper, and the cursor on the screen is determined by the background content that the helper is currently being dragged over (this part of the bug is actually the weirdest to me). Example here: https://jsfiddle.net/pufcv77k/3/

The problem appears to have been introduced here: https://github.com/clauderic/react-sortable-hoc/pull/160. It looks like that change fixes scrolling-while-dragging only when the sortable items are in a container with overflow: auto;, but perhaps I’m missing another scenario?

Not sure what the fix is here, if anything. I’d prefer not to have to set pointer-events: auto !important; to allow a custom cursor (and quash the weird background cursor behavior), but I’m not sure which behavior is preferred as default.

[rosston]

@MtDalPizzol Just in case you didn’t see it, take a look at my example code (https://jsfiddle.net/pufcv77k/3/) for a workaround. Set a helperClass (line 33 in my JS) to whatever you want, and then set pointer-events: auto !important; on that class (lines 15-17 in my CSS). It’s not pretty, but it works. I’m using this workaround to set cursor: grabbing; in my day job.

[mcroba]

@rosston I have the same issue and I have found the same workaround with pointer-events: auto !important but it doesn’t work with Firefox whereas the example of the documentation does.

here is my fiddle but I have the same with yours.

Do you or @clauderic have any idea?

Thanks in advance for your response EDIT

Actually I have found a way to make it work with Chrome and Firefox without changing the pointer-events but by setting the cursor on the container and the (sortable) items when dragging.

I’m adding a className on the container in onSortStart and remove it in onSortEnd

you can see it in my fiddle. It still doesn’t work in Safari unfortunately

I hope it can help