fix: Should not crash when height change

Author: zombieJ

examples/switch.tsx

@@ -34,7 +34,8 @@ function getData(count: number) {
 }
 
 const Demo = () => {
-  const [state, setState] = React.useState<number>(0);
+  const [height, setHeight] = React.useState(200);
+  const [state, setState] = React.useState<number>(1);
 
   const data = React.useMemo(() => {
     switch (state) {
@@ -51,9 +52,37 @@ const Demo = () => {
     <React.StrictMode>
       <div>
         <h2>Switch</h2>
+
+        <button
+          type="button"
+          onClick={() => {
+            setState((state + 1) % 3);
+          }}
+        >
+          Switch
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            switch (height) {
+              case 200:
+                setHeight(0);
+                break;
+              case 0:
+                setHeight(100);
+                break;
+              default:
+                setHeight(200);
+                break;
+            }
+          }}
+        >
+          Height
+        </button>
+
         <List
           data={data}
-          height={200}
+          height={height}
           itemHeight={30}
           itemKey="id"
           style={{
@@ -63,14 +92,6 @@ const Demo = () => {
         >
           {(item, _, props) => <ForwardMyItem {...item} {...props} />}
         </List>
-        <button
-          type="button"
-          onClick={() => {
-            setState((state + 1) % 3);
-          }}
-        >
-          Switch
-        </button>
       </div>
     </React.StrictMode>
   );

src/List.tsx

@@ -361,6 +361,15 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
           relativeTop: originCompareItemTop,
         });
       }
+    } else if (nextStatus === 'SWITCH_TO_RAW') {
+      // This is only trigger when height changes that all items can show in raw
+      // Let's reset back to top
+      this.setState({
+        cacheScroll: {
+          itemIndex: 0,
+          relativeTop: 0,
+        },
+      });
     }
 
     this.cachedProps = this.props;

tests/list.test.js

@@ -191,4 +191,9 @@ describe('List', () => {
     const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), virtual: false });
     expect(wrapper.find('li')).toHaveLength(100);
   });
+
+  it('Should not crash when height change makes virtual scroll to be raw scroll', () => {
+    const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) });
+    wrapper.setProps({ height: 1000 });
+  });
 });