TypeError: undefined is not an object (evaluating 'scrollable.scrollTop')

[mizdra]

Problem

If react-modal-sheet is mounted while the user is touching the screen, the error TypeError: undefined is not an object (evaluating 'scrollable.scrollTop') will occur.

How to produce:

1. Open this page
2. Tap anywhere on the screen.
3. Wait three seconds, then <Sheet isOpen={true} /> is mounted.
4. If you swipe the screen, the error occurs.

code:

• codesandbox's link

Environment:

• OS: iOS 16.7
• Browser: Safari 16.7

It seems that the following line is scrollable === undefined and an error occurs.

https://github.com/Temzasse/react-modal-sheet/blob/a25d023fdda60dfa378969c0669c635d8a1dc485/src/use-prevent-scroll.ts#L135

Solution

Perhaps scrollable is undefined because onTouchMove is called without calling the onTouchStart function. When scrollable === undefined, the process should be terminated as follows.

  let onTouchMove = (e: TouchEvent) => {
    // Prevent scrolling the window.
    if (
      scrollable === undefined || // add
      scrollable === document.documentElement ||
      scrollable === document.body
    ) {
      e.preventDefault();
      return;
    }
    // ...
}

[Temzasse]

Fixed in v2.2.1.