fix: move target node for event logger a few nodes down (#190)

Author: smeijer

src/components/DomEvents.js

@@ -157,8 +157,9 @@ function DomEvents() {
           <MarkupEditor markup={markup} dispatch={dispatch} />
         </div>
 
-        <div className="flex-auto h-56 md:h-full" ref={setPreviewRef}>
+        <div className="flex-auto h-56 md:h-full">
           <Preview
+            forwardedRef={setPreviewRef}
             markup={markup}
             elements={result.elements}
             accessibleRoles={result.accessibleRoles}
@@ -196,7 +197,6 @@ function DomEvents() {
               <AutoSizer>
                 {({ width, height }) => (
                   <StickyList
-                    follow={true}
                     mode="bottom"
                     ref={listRef}
                     height={height}

src/components/Preview.js

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback,
+} from 'react';
 import Scrollable from './Scrollable';
 import PreviewHint from './PreviewHint';
 import AddHtml from './AddHtml';
@@ -8,7 +14,14 @@ function selectByCssPath(rootNode, cssPath) {
   return rootNode?.querySelector(cssPath.toString().replace(/^body > /, ''));
 }
 
-function Preview({ markup, accessibleRoles, elements, dispatch, variant }) {
+function Preview({
+  markup,
+  accessibleRoles,
+  elements,
+  dispatch,
+  variant,
+  forwardedRef,
+}) {
   // Okay, listen up. `highlighted` can be a number of things, as I wanted to
   // keep a single variable to represent the state. This to reduce bug count
   // by creating out-of-sync states.
@@ -33,7 +46,13 @@ function Preview({ markup, accessibleRoles, elements, dispatch, variant }) {
     element: highlighted,
   });
 
-  // TestingLibraryDom?.getSuggestedQuery(highlighted, 'get').toString() : null
+  const refSetter = useCallback((node) => {
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node || null);
+    }
+
+    htmlRoot.current = node;
+  }, []);
 
   useEffect(() => {
     const container = document.createElement('div');
@@ -154,7 +173,7 @@ function Preview({ markup, accessibleRoles, elements, dispatch, variant }) {
             className="preview"
             onClick={handleClick}
             onMouseMove={handleMove}
-            ref={htmlRoot}
+            ref={refSetter}
             dangerouslySetInnerHTML={{
               __html: actualMarkup,
             }}

src/components/StickyList.js

@@ -3,7 +3,6 @@ import { FixedSizeList as List } from 'react-window';
 
 function StickyList(
   {
-    follow = false,
     mode = 'bottom',
     height,
     itemCount,
@@ -17,17 +16,20 @@ function StickyList(
 ) {
   const innerRef = useRef();
   useEffect(() => {
-    if (ref.current && follow && innerRef.current) {
-      if (
-        mode === 'bottom' &&
-        innerRef.current.offsetHeight > ref.current.props.height
-      ) {
-        ref.current.scrollTo(innerRef.current.offsetHeight);
-      } else if (mode === 'top') {
-        ref.current.scrollTo(0);
-      }
+    if (!ref.current || !innerRef.current) {
+      return;
     }
-  }, [itemCount, follow]);
+
+    if (innerRef.current.offsetHeight <= ref.current.props.height) {
+      return;
+    }
+
+    if (mode === 'bottom') {
+      ref.current.scrollTo(innerRef.current.offsetHeight);
+    } else {
+      ref.current.scrollTo(0);
+    }
+  }, [itemCount]);
 
   return (
     <List