Auto scroll to bottom for dynamic data (#140)

* auto scroll to bottom if at the bottom * adjust scroll check
saucelabs · Aug 10, 2024 · ab6170a · ab6170a
1 parent 7c0da02
commit ab6170a
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 14 deletions.
diff --git a/src/Components/Common/Checkbox.jsx b/src/Components/Common/Checkbox.jsx
@@ -21,6 +21,7 @@ const Checkbox = ({
       <input
         checked={isChecked}
         className={Styles.checkbox}
+        name="checkbox"
         onChange={onChange}
         type="checkbox"
       />

diff --git a/src/Components/Filters/Search.jsx b/src/Components/Filters/Search.jsx
@@ -20,6 +20,7 @@ const Search = ({
   return (
     <input
       className={Styles['search-input']}
+      name="search"
       onChange={handleInputChange}
       placeholder="Search by URL"
       type="text"

diff --git a/src/Components/Import/URLInput.jsx b/src/Components/Import/URLInput.jsx
@@ -27,6 +27,7 @@ const URLInput = ({ onSubmit }) => {
       />
       <input
         className={Styles.input}
+        name="har-url"
         onChange={handleInputChange}
         placeholder="HAR file URL"
         type="text"

diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx
@@ -7,6 +7,8 @@ import NetworkTableRow from './NetworkTableRow';
 import { TABLE_ENTRY_HEIGHT } from '../../constants';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 
+/* eslint no-underscore-dangle: 0 */
+
 const virtualizedTableRow = ({
   data,
   index,
@@ -44,29 +46,39 @@ const NetworkTableBody = ({ height }) => {
 
   const ref = useRef(null);
   const { elementDims } = useResizeObserver(ref);
+
   useEffect(() => actions.setTableHeaderWidth(elementDims.width), [elementDims]);
 
+  useEffect(() => {
+    const outerRef = ref?.current?._outerRef;
+    if (outerRef.scrollTop + outerRef.offsetHeight + TABLE_ENTRY_HEIGHT >= outerRef.scrollHeight) {
+      ref.current._outerRef.scrollTop = outerRef.scrollHeight;
+    }
+  }, [data, ref]);
+
   const handleReqSelect = (payload) => {
     actions.updateScrollToIndex(payload.index);
     actions.selectRequest(payload);
     callbacks.onRequestSelect(payload);
   };
 
   return (
-    <FixedSizeList
-      ref={ref}
-      height={height}
-      itemCount={data.size}
-      itemData={{
-        listData: data,
-        totalNetworkTime,
-        handleReqSelect,
-        selectedReqIndex,
-      }}
-      itemSize={TABLE_ENTRY_HEIGHT}
-    >
-      {virtualizedTableRow}
-    </FixedSizeList>
+    <>
+      <FixedSizeList
+        ref={ref}
+        height={height}
+        itemCount={data.size}
+        itemData={{
+          listData: data,
+          totalNetworkTime,
+          handleReqSelect,
+          selectedReqIndex,
+        }}
+        itemSize={TABLE_ENTRY_HEIGHT}
+      >
+        {virtualizedTableRow}
+      </FixedSizeList>
+    </>
   );
 };
 

diff --git a/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap b/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap
@@ -67,6 +67,7 @@ exports[`Search renders without crashing 1`] = `
     value="test"
   >
     <input
+      name="search"
       onChange={[Function]}
       placeholder="Search by URL"
       type="text"

diff --git a/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap
@@ -149,6 +149,7 @@ exports[`FilterContainer renders without crashing 1`] = `
           value=""
         >
           <input
+            name="search"
             onChange={[Function]}
             placeholder="Search by URL"
             type="text"

diff --git a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap
@@ -156,6 +156,7 @@ exports[`MainContainer renders without crashing 1`] = `
                   value=""
                 >
                   <input
+                    name="search"
                     onChange={[Function]}
                     placeholder="Search by URL"
                     type="text"
@@ -584,6 +585,7 @@ exports[`MainContainer renders without crashing 1`] = `
                             >
                               <input
                                 checked={false}
+                                name="checkbox"
                                 onChange={[Function]}
                                 type="checkbox"
                               />
@@ -593,6 +595,7 @@ exports[`MainContainer renders without crashing 1`] = `
                         </Checkbox>
                       </CORSCheckbox>
                       <input
+                        name="har-url"
                         onChange={[Function]}
                         placeholder="HAR file URL"
                         type="text"

diff --git a/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap
@@ -123,6 +123,7 @@ exports[`NetworkTableContainer renders without crashing 1`] = `
                     >
                       <input
                         checked={false}
+                        name="checkbox"
                         onChange={[Function]}
                         type="checkbox"
                       />
@@ -132,6 +133,7 @@ exports[`NetworkTableContainer renders without crashing 1`] = `
                 </Checkbox>
               </CORSCheckbox>
               <input
+                name="har-url"
                 onChange={[Function]}
                 placeholder="HAR file URL"
                 type="text"