From bc2cb8be8ccdab79bfbe91d3fa781fff33ce0f7c Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Wed, 17 Jun 2020 15:45:07 +0200
Subject: [PATCH 1/2] fix: initial height of event log pane

---
 src/components/DomEvents.js  |  4 ++--
 src/components/Preview.js    | 27 +++++++++++++++++++++++----
 src/components/StickyList.js | 10 +++-------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/DomEvents.js b/src/components/DomEvents.js
index ca9794fe..0a7b13ab 100644
--- a/src/components/DomEvents.js
+++ b/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}
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 1ff216b3..418b3bf7 100644
--- a/src/components/Preview.js
+++ b/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,
             }}
diff --git a/src/components/StickyList.js b/src/components/StickyList.js
index b4e60d2b..c9ecdb69 100644
--- a/src/components/StickyList.js
+++ b/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,14 @@ function StickyList(
 ) {
   const innerRef = useRef();
   useEffect(() => {
-    if (ref.current && follow && innerRef.current) {
-      if (
-        mode === 'bottom' &&
-        innerRef.current.offsetHeight > ref.current.props.height
-      ) {
+    if (ref.current && innerRef.current) {
+      if (mode === 'bottom') {
         ref.current.scrollTo(innerRef.current.offsetHeight);
       } else if (mode === 'top') {
         ref.current.scrollTo(0);
       }
     }
-  }, [itemCount, follow]);
+  }, [itemCount]);
 
   return (
     <List

From 0ba33e4e1e9d423c9bb1e16887566c2e3ddea356 Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Wed, 17 Jun 2020 16:08:40 +0200
Subject: [PATCH 2/2] chore: reduce nesting of conditions

---
 src/components/StickyList.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/StickyList.js b/src/components/StickyList.js
index c9ecdb69..8e372b42 100644
--- a/src/components/StickyList.js
+++ b/src/components/StickyList.js
@@ -16,12 +16,18 @@ function StickyList(
 ) {
   const innerRef = useRef();
   useEffect(() => {
-    if (ref.current && innerRef.current) {
-      if (mode === 'bottom') {
-        ref.current.scrollTo(innerRef.current.offsetHeight);
-      } else if (mode === 'top') {
-        ref.current.scrollTo(0);
-      }
+    if (!ref.current || !innerRef.current) {
+      return;
+    }
+
+    if (innerRef.current.offsetHeight <= ref.current.props.height) {
+      return;
+    }
+
+    if (mode === 'bottom') {
+      ref.current.scrollTo(innerRef.current.offsetHeight);
+    } else {
+      ref.current.scrollTo(0);
     }
   }, [itemCount]);