fix(bcd): observe header, not full table

mdn · Oct 28, 2024 · 1d36f8d · 1d36f8d
1 parent 473ff5d
commit 1d36f8d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/client/src/document/ingredients/browser-compatibility-table/headers.tsx b/client/src/document/ingredients/browser-compatibility-table/headers.tsx
@@ -1,5 +1,6 @@
 import type BCD from "@mdn/browser-compat-data/types";
 import { BrowserName } from "./browser-info";
+import { forwardRef } from "react";
 
 function PlatformHeaders({
   platforms,
@@ -63,17 +64,16 @@ export function browserToIconName(browser: string) {
   return browserStart === "firefox" ? "simple-firefox" : browserStart;
 }
 
-export function Headers({
-  platforms,
-  browsers,
-  browserInfo,
-}: {
-  platforms: string[];
-  browsers: BCD.BrowserName[];
-  browserInfo: BCD.Browsers;
-}) {
+export const Headers = forwardRef<
+  HTMLTableSectionElement,
+  {
+    platforms: string[];
+    browsers: BCD.BrowserName[];
+    browserInfo: BCD.Browsers;
+  }
+>(function Headers({ platforms, browsers, browserInfo }, ref) {
   return (
-    <thead>
+    <thead ref={ref}>
       <PlatformHeaders
         platforms={platforms}
         browsers={browsers}
@@ -82,4 +82,4 @@ export function Headers({
       <BrowserHeaders browsers={browsers} />
     </thead>
   );
-}
+});
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.tsx b/client/src/document/ingredients/browser-compatibility-table/index.tsx
@@ -215,15 +215,12 @@ export default function BrowserCompatibilityTable({
         </a>
         <figure className="table-container">
           <figure className="table-container-inner">
-            <table
-              key="bc-table"
-              className="bc-table bc-table-web"
-              ref={observedNode}
-            >
+            <table key="bc-table" className="bc-table bc-table-web">
               <Headers
                 platforms={platforms}
                 browsers={browsers}
                 browserInfo={browserInfo}
+                ref={observedNode}
               />
               <tbody>
                 <FeatureListAccordion