fix: nest scroll should block (#288)

* docs: add demo

* chore: prevent scroll

* chore: comment

* chore: tmp of it

* fix: not scroll

* chore: update

* chore: rollback

* test: cov

Author: zombieJ

docs/demo/nest.md

@@ -0,0 +1,8 @@
+---
+title: Nest
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/nest.tsx"></code>

examples/nest.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import List from '../src/List';
+import './basic.less';
+
+interface Item {
+  id: number;
+}
+
+const data: Item[] = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    id: i,
+  });
+}
+
+const MyItem: React.ForwardRefRenderFunction<any, Item> = ({ id }, ref) => (
+  <div style={{ padding: 20, background: 'yellow' }} ref={ref}>
+    <List
+      data={data}
+      height={200}
+      itemHeight={20}
+      itemKey="id"
+      style={{
+        border: '1px solid blue',
+        boxSizing: 'border-box',
+        background: 'white',
+      }}
+      // debug={`inner_${id}`}
+    >
+      {(item, index, props) => (
+        <div {...(item as any)} {...props} style={{ height: 20, border: '1px solid cyan' }}>
+          {id}-{index}
+        </div>
+      )}
+    </List>
+  </div>
+);
+
+const ForwardMyItem = React.forwardRef(MyItem);
+
+const onScroll: React.UIEventHandler<HTMLElement> = (e) => {
+  // console.log('scroll:', e.currentTarget.scrollTop);
+};
+
+const Demo = () => {
+  return (
+    <React.StrictMode>
+      <List
+        id="list"
+        data={data}
+        height={800}
+        itemHeight={20}
+        itemKey="id"
+        style={{
+          border: '1px solid red',
+          boxSizing: 'border-box',
+        }}
+        onScroll={onScroll}
+        // debug="outer"
+      >
+        {(item, _, props) => <ForwardMyItem {...item} {...props} />}
+      </List>
+    </React.StrictMode>
+  );
+};
+
+export default Demo;
+
+/* eslint-enable */

src/Context.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const WheelLockContext = React.createContext<(lock: boolean) => void>(() => {});

src/List.tsx

@@ -379,8 +379,6 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const onWheelDelta: Parameters<typeof useFrameWheel>[6] = useEvent((offsetXY, fromHorizontal) => {
     if (fromHorizontal) {
-      // Horizontal scroll no need sync virtual position
-
       flushSync(() => {
         setOffsetLeft((left) => {
           const nextOffsetLeft = left + (isRTL ? -offsetXY : offsetXY);
@@ -393,6 +391,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     } else {
       syncScrollTop((top) => {
         const newTop = top + offsetXY;
+
         return newTop;
       });
     }
@@ -410,17 +409,31 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   );
 
   // Mobile touch move
-  useMobileTouchMove(useVirtual, componentRef, (isHorizontal, delta, smoothOffset) => {
+  useMobileTouchMove(useVirtual, componentRef, (isHorizontal, delta, smoothOffset, e) => {
+    const event = e as TouchEvent & {
+      _virtualHandled?: boolean;
+    };
+
     if (originScroll(isHorizontal, delta, smoothOffset)) {
       return false;
     }
 
-    onRawWheel({
-      preventDefault() {},
-      deltaX: isHorizontal ? delta : 0,
-      deltaY: isHorizontal ? 0 : delta,
-    } as WheelEvent);
-    return true;
+    // Fix nest List trigger TouchMove event
+    if (!event || !event._virtualHandled) {
+      if (event) {
+        event._virtualHandled = true;
+      }
+
+      onRawWheel({
+        preventDefault() {},
+        deltaX: isHorizontal ? delta : 0,
+        deltaY: isHorizontal ? 0 : delta,
+      } as WheelEvent);
+
+      return true;
+    }
+
+    return false;
   });
 
   useLayoutEffect(() => {
@@ -548,6 +561,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     containerProps.dir = 'rtl';
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    containerProps['data-dev-offset-top'] = offsetTop;
+  }
+
   return (
     <div
       ref={containerRef}

src/hooks/useFrameWheel.ts

@@ -18,7 +18,7 @@ export default function useFrameWheel(
   /***
    * Return `true` when you need to prevent default event
    */
-  onWheelDelta: (offset: number, horizontal?: boolean) => void,
+  onWheelDelta: (offset: number, horizontal: boolean) => void,
 ): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] {
   const offsetRef = useRef(0);
   const nextFrameRef = useRef<number>(null);
@@ -35,15 +35,25 @@ export default function useFrameWheel(
     isScrollAtRight,
   );
 
-  function onWheelY(event: WheelEvent, deltaY: number) {
+  function onWheelY(e: WheelEvent, deltaY: number) {
     raf.cancel(nextFrameRef.current);
 
-    offsetRef.current += deltaY;
-    wheelValueRef.current = deltaY;
-
     // Do nothing when scroll at the edge, Skip check when is in scroll
     if (originScroll(false, deltaY)) return;
 
+    // Skip if nest List has handled this event
+    const event = e as WheelEvent & {
+      _virtualHandled?: boolean;
+    };
+    if (!event._virtualHandled) {
+      event._virtualHandled = true;
+    } else {
+      return;
+    }
+
+    offsetRef.current += deltaY;
+    wheelValueRef.current = deltaY;
+
     // Proxy of scroll events
     if (!isFF) {
       event.preventDefault();
@@ -53,7 +63,7 @@ export default function useFrameWheel(
       // Patch a multiple for Firefox to fix wheel number too small
       // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
       const patchMultiple = isMouseScrollRef.current ? 10 : 1;
-      onWheelDelta(offsetRef.current * patchMultiple);
+      onWheelDelta(offsetRef.current * patchMultiple, false);
       offsetRef.current = 0;
     });
   }

src/hooks/useMobileTouchMove.ts

@@ -7,7 +7,12 @@ const SMOOTH_PTG = 14 / 15;
 export default function useMobileTouchMove(
   inVirtual: boolean,
   listRef: React.RefObject<HTMLDivElement>,
-  callback: (isHorizontal: boolean, offset: number, smoothOffset?: boolean) => boolean,
+  callback: (
+    isHorizontal: boolean,
+    offset: number,
+    smoothOffset: boolean,
+    e?: TouchEvent,
+  ) => boolean,
 ) {
   const touchedRef = useRef(false);
   const touchXRef = useRef(0);
@@ -34,22 +39,27 @@ export default function useMobileTouchMove(
         touchYRef.current = currentY;
       }
 
-      if (callback(isHorizontal, isHorizontal ? offsetX : offsetY)) {
+      const scrollHandled = callback(isHorizontal, isHorizontal ? offsetX : offsetY, false, e);
+      if (scrollHandled) {
         e.preventDefault();
       }
+
       // Smooth interval
       clearInterval(intervalRef.current);
-      intervalRef.current = setInterval(() => {
-        if (isHorizontal) {
-          offsetX *= SMOOTH_PTG;
-        } else {
-          offsetY *= SMOOTH_PTG;
-        }
-        const offset = Math.floor(isHorizontal ? offsetX : offsetY);
-        if (!callback(isHorizontal, offset, true) || Math.abs(offset) <= 0.1) {
-          clearInterval(intervalRef.current);
-        }
-      }, 16);
+
+      if (scrollHandled) {
+        intervalRef.current = setInterval(() => {
+          if (isHorizontal) {
+            offsetX *= SMOOTH_PTG;
+          } else {
+            offsetY *= SMOOTH_PTG;
+          }
+          const offset = Math.floor(isHorizontal ? offsetX : offsetY);
+          if (!callback(isHorizontal, offset, true) || Math.abs(offset) <= 0.1) {
+            clearInterval(intervalRef.current);
+          }
+        }, 16);
+      }
     }
   };
 

tests/scroll.test.js

@@ -1,10 +1,9 @@
 import '@testing-library/jest-dom';
-import { createEvent, fireEvent, render } from '@testing-library/react';
+import { act, createEvent, fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import List from '../src';
 import { spyElementPrototypes } from './utils/domHook';
 
@@ -51,11 +50,13 @@ describe('List.Scroll', () => {
   });
 
   function genList(props, func = mount) {
-    let node = (
-      <List component="ul" itemKey="id" {...props}>
-        {({ id }) => <li>{id}</li>}
-      </List>
-    );
+    const mergedProps = {
+      component: 'ul',
+      itemKey: 'id',
+      children: ({ id }) => <li>{id}</li>,
+      ...props,
+    };
+    let node = <List {...mergedProps} />;
 
     if (props.ref) {
       node = <div>{node}</div>;
@@ -494,4 +495,43 @@ describe('List.Scroll', () => {
 
     expect(container.querySelector('.rc-virtual-list-scrollbar-thumb')).toBeVisible();
   });
+
+  it('nest scroll', async () => {
+    const { container } = genList(
+      {
+        itemHeight: 20,
+        height: 100,
+        data: genData(100),
+        children: ({ id }) =>
+          id === '0' ? (
+            <li>
+              <List component="ul" itemKey="id" itemHeight={20} height={100} data={genData(100)}>
+                {({ id }) => <li>{id}</li>}
+              </List>
+            </li>
+          ) : (
+            <li />
+          ),
+      },
+      render,
+    );
+
+    fireEvent.wheel(container.querySelector('ul ul li'), {
+      deltaY: 10,
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(1000000);
+      await Promise.resolve();
+    });
+
+    expect(container.querySelectorAll('[data-dev-offset-top]')[0]).toHaveAttribute(
+      'data-dev-offset-top',
+      '0',
+    );
+    expect(container.querySelectorAll('[data-dev-offset-top]')[1]).toHaveAttribute(
+      'data-dev-offset-top',
+      '10',
+    );
+  });
 });

tests/touch.test.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
-import { spyElementPrototypes } from './utils/domHook';
+import React from 'react';
 import List from '../src';
+import { spyElementPrototypes } from './utils/domHook';
 
 function genData(count) {
   return new Array(count).fill(null).map((_, index) => ({ id: String(index) }));
@@ -123,11 +124,55 @@ describe('List.Touch', () => {
 
     const touchEvent = new Event('touchstart');
     touchEvent.preventDefault = preventDefault;
-    wrapper
-      .find('.rc-virtual-list-scrollbar')
-      .instance()
-      .dispatchEvent(touchEvent);
+    wrapper.find('.rc-virtual-list-scrollbar').instance().dispatchEvent(touchEvent);
 
     expect(preventDefault).toHaveBeenCalled();
   });
+
+  it('nest touch', async () => {
+    const { container } = render(
+      <List component="ul" itemHeight={20} height={100} data={genData(100)}>
+        {({ id }) =>
+          id === '0' ? (
+            <li>
+              <List component="ul" itemKey="id" itemHeight={20} height={100} data={genData(100)}>
+                {({ id }) => <li>{id}</li>}
+              </List>
+            </li>
+          ) : (
+            <li />
+          )
+        }
+      </List>,
+    );
+
+    const targetLi = container.querySelector('ul ul li');
+
+    fireEvent.touchStart(targetLi, {
+      touches: [{ pageY: 0 }],
+    });
+
+    fireEvent.touchMove(targetLi, {
+      touches: [{ pageY: -1 }],
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(1000000);
+      await Promise.resolve();
+    });
+
+    expect(container.querySelectorAll('[data-dev-offset-top]')[0]).toHaveAttribute(
+      'data-dev-offset-top',
+      '0',
+    );
+
+    // inner not to be 0
+    expect(container.querySelectorAll('[data-dev-offset-top]')[1]).toHaveAttribute(
+      'data-dev-offset-top',
+    );
+    expect(container.querySelectorAll('[data-dev-offset-top]')[1]).not.toHaveAttribute(
+      'data-dev-offset-top',
+      '0',
+    );
+  });
 });