Added non-passive event listener to a scroll-blocking 'touchstart' event

Signed-off-by: TLT <[email protected]>

Author: tunglt1810

src/useDetectTouch.js

@@ -10,10 +10,10 @@ export default function useDetectTouch() {
     }
 
     const removeListener = () => {
-      document.removeEventListener('touchstart', handleTouch)
+      document.removeEventListener('touchstart', handleTouch, { passive: true })
     }
 
-    document.addEventListener('touchstart', handleTouch)
+    document.addEventListener('touchstart', handleTouch, { passive: true })
     return removeListener
   }, [])
 

src/useGrid.js

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useEffect, useReducer } from 'react'
+import { useEffect, useLayoutEffect, useReducer, useRef } from 'react'
 
 import {
   addMonths,
@@ -200,14 +200,14 @@ export default function useGrid({ locale, month: currentMonth, onMonthChange, tr
         }
       }
 
-      containerElement.addEventListener('touchstart', handleDragStart)
-      containerElement.addEventListener('touchmove', handleDrag)
-      containerElement.addEventListener('touchend', handleDragEnd)
+      containerElement.addEventListener('touchstart', handleDragStart, { passive: true })
+      containerElement.addEventListener('touchmove', handleDrag, { passive: true })
+      containerElement.addEventListener('touchend', handleDragEnd, { passive: true })
 
       return () => {
-        containerElement.removeEventListener('touchstart', handleDragStart)
-        containerElement.removeEventListener('touchmove', handleDrag)
-        containerElement.removeEventListener('touchend', handleDragEnd)
+        containerElement.removeEventListener('touchstart', handleDragStart, { passive: true })
+        containerElement.removeEventListener('touchmove', handleDrag, { passive: true })
+        containerElement.removeEventListener('touchend', handleDragEnd, { passive: true })
       }
     }
   })

src/useOutsideClickHandler.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 export default function useOutsideClickHandler(callback) {
   const refA = useRef()
@@ -16,10 +16,10 @@ export default function useOutsideClickHandler(callback) {
       }
     }
 
-    document.addEventListener('click', handleOutsideClick)
+    document.addEventListener('click', handleOutsideClick, { passive: true })
 
     return () => {
-      document.removeEventListener('click', handleOutsideClick)
+      document.removeEventListener('click', handleOutsideClick, { passive: true })
     }
   }, [callback])