fix(comparison-table): Fix comparison table not setting ref on load (#…

…256)

* fix(comparison-table): Fix comparison table not setting ref on load

* remove console.log

* fix hardcoded userId

src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -2,13 +2,13 @@ import debounce from 'lodash.debounce';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { ArrowValues } from '../components/TableArrows';
+import generateId from '../../../util/generateId';
 
 export const useComparisonTable = () => {
   const [showMore, setShowMore] = useState<boolean>(false);
   const [headerWidth, setHeaderWidth] = useState(1400);
-
+  const [headerId, setHeaderId] = useState('');
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-
   const [selectedSection, setSelectedSection] = useState('');
 
   const headerRef = useRef<HTMLDivElement | null>(null);
@@ -110,8 +110,25 @@ export const useComparisonTable = () => {
     setShowMore(!showMore);
   };
 
+  useEffect(() => {
+    if (headerRef.current) {
+      return;
+    }
+
+    const headerById = document.getElementById(headerId);
+
+    if (headerById) {
+      scrollContainerCallbackRef(headerById);
+    }
+  }, [headerId, scrollContainerCallbackRef]);
+
+  useEffect(() => {
+    setHeaderId(generateId());
+  }, []);
+
   return {
     headerWidth,
+    headerId,
     contentContainerRef,
     selectedSection,
     setSelectedSection,

src/lib/components/comparisonTable/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Fragment } from 'react';
+import { Fragment, useEffect } from 'react';
 import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 
 import { AccordionItem } from './components/AccordionItem';
@@ -85,6 +85,7 @@ const ComparisonTable = <T extends { id: number }>(
     handleArrowsClick,
     toggleMoreRows,
     showMore,
+    headerId,
   } = useComparisonTable();
 
   const cssVariablesStyle = {
@@ -105,6 +106,7 @@ const ComparisonTable = <T extends { id: number }>(
         <div className={classNames(baseStyles.header, styles?.header)}>
           <ScrollSyncPane>
             <div
+              id={headerId}
               className={classNames(baseStyles.container, {
                 [baseStyles.noScrollBars]: hideScrollBars,
               })}