fix blocking all scrolling when RemoveScroll is used within ShadowRoot

theKashey · Sep 23, 2023 · c888ad6 · c888ad6
1 parent d493da9
commit c888ad6
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx
@@ -26,7 +26,7 @@ let idCounter = 0;
 let lockStack: any[] = [];
 
 export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
-  const shouldPreventQueue = React.useRef<Array<{ name: string; delta: number[]; target: any; should: boolean }>>([]);
+  const shouldPreventQueue = React.useRef<Array<{ name: string; delta: number[]; target: any; should: boolean; shadowParent?: HTMLElement | null }>>([]);
   const touchStartRef = React.useRef([0, 0]);
   const activeAxis = React.useRef<Axis | undefined>();
   const [id] = React.useState(idCounter++);
@@ -114,7 +114,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
 
     const delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
     const sourceEvent = shouldPreventQueue.current.filter(
-      (e) => e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta)
+      (e) => e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta)
     )[0];
 
     // self event, and should be canceled
@@ -145,7 +145,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
   }, []);
 
   const shouldCancel = React.useCallback((name: string, delta: number[], target: any, should: boolean) => {
-    const event = { name, delta, target, should };
+    const event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
 
     setTimeout(() => {
@@ -197,3 +197,15 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
     </React.Fragment>
   );
 }
+
+function getOutermostShadowParent(node: Node | null): HTMLElement | null {
+  let shadowParent: HTMLElement | null = null;
+  while (node !== window.document && node !== null) {
+    if (node instanceof ShadowRoot) {
+      shadowParent = node.host as HTMLElement;
+      node = node.host;
+    }
+    node = node?.parentNode;
+  }
+  return shadowParent
+}