Merge pull request #3035 from github/koesie10/fix-ref

Fix scroll into view not working when revealing method
github · Nov 1, 2023 · 6685883 · 6685883
2 parents ad121a5 + 50ae7d5
commit 6685883
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/extensions/ql-vscode/src/view/common/DataGrid.tsx b/extensions/ql-vscode/src/view/common/DataGrid.tsx
@@ -107,21 +107,28 @@ interface DataGridCellProps {
  * cells anywhere within the grid. You can also configure cells to span multiple rows
  * or columns. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column.
  */
-export function DataGridCell({
-  rowType = "default",
-  gridRow,
-  gridColumn,
-  className,
-  children,
-}: DataGridCellProps) {
-  return (
-    <StyledDataGridCell
-      $rowType={rowType}
-      $gridRow={gridRow}
-      $gridColumn={gridColumn}
-      className={className}
-    >
-      {children}
-    </StyledDataGridCell>
-  );
-}
+export const DataGridCell = forwardRef(
+  (
+    {
+      rowType = "default",
+      gridRow,
+      gridColumn,
+      className,
+      children,
+    }: DataGridCellProps,
+    ref?: React.Ref<HTMLElement | undefined>,
+  ) => {
+    return (
+      <StyledDataGridCell
+        $rowType={rowType}
+        $gridRow={gridRow}
+        $gridColumn={gridColumn}
+        className={className}
+        ref={ref}
+      >
+        {children}
+      </StyledDataGridCell>
+    );
+  },
+);
+DataGridCell.displayName = "DataGridCell";
diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -193,11 +193,11 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
     return (
       <DataGridRow
         data-testid="modelable-method-row"
-        ref={ref}
         focused={revealedMethodSignature === method.signature}
       >
         <DataGridCell
           gridRow={`span ${modeledMethods.length + validationErrors.length}`}
+          ref={ref}
         >
           <ApiOrMethodRow>
             <ModelingStatusIndicator status={modelingStatus} />
@@ -322,10 +322,9 @@ const UnmodelableMethodRow = forwardRef<
   return (
     <DataGridRow
       data-testid="unmodelable-method-row"
-      ref={ref}
       focused={revealedMethodSignature === method.signature}
     >
-      <DataGridCell>
+      <DataGridCell ref={ref}>
         <ApiOrMethodRow>
           <ModelingStatusIndicator status="saved" />
           <MethodClassifications method={method} />