grab and grabbing

[VladimirHybriun]

Mouse cursor not switching between grab and grabbing

[rfmiotto]

Dear @VladimirHybriun,

Could you please provide more detail or, preferably, a Sandbox (or similar) setup to replicate the issue?

Thanks for reporting it!

[OkazakiNaoki]

If you try to map an array state after set state in useEffect would cause this.
But an array state map without set state would not cause this. (use default state value mapping)
Test with React 18.2 and js version.

Also once mouse up, only container change cursor back to auto.
All children stay in grabbing.

I think it's due to your layout effect not tracking the size change of children.
If default state is a length of 5 array.
I then later change to a length of 8 array.
Once you grab exceed the length of 5, it cause grabbing cursor lock situation.

[Tpleme]

If you try to map an array state after set state in useEffect would cause this. But an array state map without set state would not cause this. (use default state value mapping) Test with React 18.2 and js version.

Also once mouse up, only container change cursor back to auto. All children stay in grabbing.

I think it's due to your layout effect not tracking the size change of children. If default state is a length of 5 array. I then later change to a length of 8 array. Once you grab exceed the length of 5, it cause grabbing cursor lock situation.

I can confirm this, and is easy to check. Try rendering the div with the ref only when the array is populated.
Like:

if(!assets || assets.length === 0) return;

<div ref={ref} {...events}>
    {assets.map(el => <img alt={el.alt} src={el.src}) />)}
</div>