useMove with Modal is causing issues

[ziyak97]

I am using the react-aria-components modal and trying to create a modal that can be dismissed by sliding down using the react-aria useMove hook. While this works well on desktop, I am encountering issues on mobile where the onMoveEnd part of the hook is called almost immediately after I start my touch. I have attached a CodeSandbox link for reproduction:

https://codesandbox.io/p/sandbox/immutable-sky-cxxnlz

Any help would be appreciated.

[snowystinger]

Hey, sorry to hear something isn't quite working.

I'm not sure what's going on, but I don't see any modal in the codesandbox provided. Could you provide precise steps to reproduce with what you expect vs what happens?

[ziyak97]

i am sharing the link too (some styles are missing i cannot get tailwind configured but should give you an idea) - https://cxxnlz-3000.csb.app/

Click on open
The model will slide up
No put your mouse anywhere in the modal and drag down it will move. if you go down enough it will close
This works on desktop but on mobile if you swipe down it very quickly stop on account of the moveEnd part being called despite the move not ending

hope this helps. thanks!

[snowystinger]

I'm trying your sandbox on iOS 16.5 and it appears to work correctly.

What device are you on?

[ziyak97]

i actually figured out the issue. if I have use move inside a container with any overflow property like hidden/overflow it does not get detected properly. i have opened another Question regarding this over here - #4734 (comment)

hopefully will get more clarity once this is done

edit - using Android 13

[LFDanLu]

Just chiming in, I'm on Android 13/Chrome 114/Samsung Galaxy S22+ and I can't reproduce the issue via https://cxxnlz-3000.csb.app/

[ziyak97]

hey maybe my current demo does not make clear what the issue is. i provided another one here #4734 (reply in thread). basically if children inside the useMove parent is scrollable the hook behaves slightly weirdly. you could check the discussion above for more info on this.