useMove does not work with scrollable container

[ziyak97]

if the container is scrollable the useMove hook does not work. is this the intended behavior or is it a bug?

[snowystinger]

Could you provide a codesandbox example so we can see what you mean by "does not work"? here's a template to get started https://codesandbox.io/s/react-spectrum-template-syueo

[snowystinger]

Thank you for that, I can see what you're seeing now.

I'm not sure how useMove would work on a scrolling element. Either you're scrolling, or you're moving something around, not both.

It seems like being able to scroll the content should win. Instead, you could make some interactive element, like a "gripper" or something. For example, the resize element on the textarea we are typing in to write messages here in the bottom right. Or you could make the header region of a popover that isn't part of the scrollable content which a user could touch and drag on.

Then there is a clear difference between what you're "moving" vs what you're scrolling.

[ziyak97]

yeah got it was just trying to figure if this is expected behavior. i was just trying to figure if this was expected behavior. will try to figure my use case based on this. the main issue i face that the behavior is slightly different on the chrome devtools mobile mode vs on an actually device so it has been kinda tough for me to figure so far. thanks for your help!

[ziyak97]

i feel like on scroll containers the move should either be called or not at all. this is kinda halfway where it gets called but then almost immediately ends which gives undesired behavior. so i moved to the header system but now when i scroll on the part that is not supposed to move it kinda moves the modal slightly. also the behavior observed in the browser devtools and on the actually device varies a ton. any opinions?

[snowystinger]

Sounds reasonable, we could look at why move is starting to be called, that feels more like a bug to me.

As for behavior varying between devtools and device, that's to be expected. The devtools are just an emulation of a specific device. It's not actually representative of all the devices out there.

[ziyak97]

I have recently made changes to the slide-up modal I was working on, to make it more similar to YouTube comments. Previously, I had designed the entire modal to act as a trigger for sliding down. The idea was that if there was a scrollable space, it would slide down when the user reached the top of the scrollable space. I wrote some conditions for this based on ref and scroll listener, but the results on mobile devices were not as desired due to conflicts with the useMove hook.

In my understanding, useMove attempts to work but gets detached as soon as the browser scroll takes over. This could be considered a bug. I also suggest mentioning in the documentation that mobile emulation on devtools will not use the native browser scroll as expected, but will instead use useMove. This could prevent unexpected results for developers who use this hook for mobile device gestures.

Despite these issues, I have found this hook to be very useful and it is definitely the best useMove hook I have found online. Thanks for all the help!