Pause typekit MutationObserver during scrolling (#6699)

Author: devongovett

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -102,6 +102,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
         state.isScrolling = true;
         setScrolling(true);
 
+        // Pause typekit MutationObserver during scrolling.
+        window.dispatchEvent(new Event('tk.disconnect-observer'));
         if (onScrollStart) {
           onScrollStart();
         }
@@ -120,6 +122,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
           setScrolling(false);
           state.scrollTimeout = null;
 
+          window.dispatchEvent(new Event('tk.connect-observer'));
           if (onScrollEnd) {
             onScrollEnd();
           }
@@ -135,6 +138,9 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   useEffect(() => {
     return () => {
       clearTimeout(state.scrollTimeout);
+      if (state.isScrolling) {
+        window.dispatchEvent(new Event('tk.connect-observer'));
+      }
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

packages/@react-stately/layout/src/ListLayout.ts

@@ -244,7 +244,6 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     }
 
     let layoutNode = this.buildNode(node, x, y);
-    layoutNode.node = node;
 
     layoutNode.layoutInfo.parentKey = parentKey ?? null;
     this.layoutNodes.set(node.key, layoutNode);
@@ -310,7 +309,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect.intersection(this.requestedRect)
+      validRect: layoutInfo.rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -347,7 +347,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return {
       layoutInfo: header,
       children: [],
-      validRect: header.rect.intersection(this.requestedRect)
+      validRect: header.rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -380,7 +381,9 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     layoutInfo.estimatedSize = isEstimated;
     return {
       layoutInfo,
-      validRect: layoutInfo.rect
+      children: [],
+      validRect: layoutInfo.rect,
+      node
     };
   }
 

packages/@react-stately/layout/src/TableLayout.ts

@@ -113,7 +113,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect
+      validRect: layoutInfo.rect,
+      node: this.collection.head
     };
   }
 
@@ -143,7 +144,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo: row,
       children: columns,
-      validRect: rect
+      validRect: rect,
+      node: headerRow
     };
   }
 
@@ -208,7 +210,9 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     return {
       layoutInfo,
-      validRect: layoutInfo.rect
+      children: [],
+      validRect: layoutInfo.rect,
+      node
     };
   }
 
@@ -259,7 +263,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect.intersection(this.requestedRect)
+      validRect: layoutInfo.rect.intersection(this.requestedRect),
+      node: this.collection.body
     };
   }
 
@@ -296,6 +301,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
           if (layoutNode) {
             layoutNode.layoutInfo.rect.x = x;
             x += layoutNode.layoutInfo.rect.width;
+          } else {
+            break;
           }
         } else {
           let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
@@ -315,7 +322,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: rect.intersection(this.requestedRect)
+      validRect: rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -330,7 +338,9 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     return {
       layoutInfo,
-      validRect: rect
+      children: [],
+      validRect: rect,
+      node
     };
   }