Sheet not closing on mobile about react-modal-sheet

[CodeXiD]

same problem, any news on this issue?

Not really. I did a workaround

Share your solution?

[mirandanc]

Still having the same problem.

[BetBit]

Hello!
This issue is only related to Android; everything works correctly on iOS.

[gremcha]

Hello @Temzasse

I've also encountered this issue. Your demonstrative example doesn't work on Android mobile devices. I tested it on Chrome and Firefox browsers.

I can also reproduce this problem on a computer in the Chrome browser. Under normal conditions, the modal window behaves correctly, but when I switch to a mobile device, it stops closing.

[CodeXiD]

same problem, any news on this issue?

[CodeXiD]

Hello everyone, I encountered the same problem, in my case I removed the Header, and wanted to make my own, but on mobile I encountered a problem that the panel did not collapse, but only jumped slightly from top to bottom. The solution turned out to be quite simple, I added the draggable={false} attribute to my own Header (which is not located at the top of the hierarchy), and everything began to work as expected

[Knaackee]

same problem, any news on this issue?

Not really. I did a workaround

[Temzasse]

Hi @Knaackee 👋

The Scroller component works so that it enables the drag gestures only when the scroller is either at the top or at the bottom. If the user is scrolling the content the sheet body is not draggable as there is really no way to distinguish between scrolling and dragging.

Is the problem that the sheet is not draggable at the top/bottom positions? That would be a bug.

Does this example demo work for you? At least on my iPhone it works nicely: sheet is dragged down from body area when the sheet is not scrolled and when the sheet scroller is scrolled all the way to bottom the sheet can be dragged upwards.

[laem]

Same here. More precisely, on android :

• with draggable=both, on Firefox, when the content is not high enough to require scroll, the drag action closes the modal. But does not close when the content requires scroll
• on chromium (bromite, kiwi), it can never be closed with a scroll

[laem]

Would gladly help, but I'm a bit lost, the code is more complicated than I thought :)

[laem]

Mmmh, found something interesting ! On chrome mobile (well at least Bromite and Kiwi), drag works... with two fingers !

On chromium desktop in mobile dev mode, shift + drag works too (simulates two fingers).

Can also confirm that using two fingers solves the problem for firefox when content height -> scroll.

with draggable=both, on Firefox, when the content is not high enough to require scroll, the drag action closes the modal. But does not close when the content requires scroll

[laem]

First I tried to resolve this by setting "overflow:hidden" when the user started to drag. But it doesn't work.

Now trying to use the "touch-action" css prop thanks to this issue and getting interesting results, though not good enough yet. I'm trying things on the lib locally in my repo laem/cartes@a0e2377

[laem]

Unfortunately, firefox and safari do not support "pan-down"...

Edit : I implemented a small hook to detect the direction of the pan.

[joaolfern]

It's not ideial but I'm using this to prevent the page from refreshing:

useLayoutEffect(() => {
  if (isOpen) document.querySelector('body')!.style.overscrollBehavior = 'none'

  return () => {
    document.querySelector('body')!.style.overscrollBehavior = 'unset'
  }
}, [isOpen])

I think it will still take a moment for users to figure out how to close it, but I also have snapPoints={[0.85]} so there's a nice inviting touchable area.

[robertpiosik]

Hi, from what I tested https://github.com/emilkowalski/vaul tackles this behavior on chrome correctly, maybe we could get some inspiration from them.