Sheet not closing on mobile

[Knaackee]

At first, thanks for the great work!

I am unable to “swipe to close” the sheet on mobile while using the <Scroller/>.
Without the scroller, it works. It works on the drag indicator but not on the content area.

<Sheet
    isOpen={state.isOpen}
    onClose={() => onClose()}
  >
  <Sheet.Container>
    <Sheet.Header />
    <Sheet.Content>
      <Sheet.Scroller>
        <div className="h-64">Hello</div>
      </Sheet.Scroller>
    </Sheet.Content>
  </Sheet.Container>
  <Sheet.Backdrop
    onTap={() => {
      onClose();
    }}
  />
</Sheet>

Any idea?

[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

[CodeXiD]

same problem, any news on this issue?

Not really. I did a workaround

Share your solution?

[mirandanc]

Still having the same problem.

[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.

[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.

[BetBit]

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

[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 cartesapp/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.

[danchistyakov]

@Temzasse seems it can be realised just detecting that scrollable body position now at the top then we can enable swipe functionality

[armanTakmazyan]

I have the same problem using Chrome on Android devices. When utilizing the <Scroller /> component, I am unable to "swipe to close".

[rogorman9]

Having the same problem here, on Firefox/Android. I'm not able to swipe to close on this demo either.

[mpmua]

Also having the same issue, if sheet.scroller is being used the sheet cannot be dragged down on Android, no issues on iOS.

[laem]

Feel free to try my embedded fork deployed at https://cartes.app. If it solves your problem, someone could consider making a PR.