Add portal to the column renderer

Signed-off-by: popcorny <[email protected]> Co-authored-by: even-wei <[email protected]>
DataRecce · Jan 16, 2025 · e52e384 · e52e384
1 parent 3535f34
commit e52e384
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/js/src/components/valuediff/ValueDiffResultView.tsx b/js/src/components/valuediff/ValueDiffResultView.tsx
@@ -10,6 +10,7 @@ import {
   MenuGroup,
   MenuItem,
   MenuList,
+  Portal,
   Spacer,
 } from "@chakra-ui/react";
 
@@ -70,27 +71,31 @@ function ColumnNameCell({
               size={"sm"}
             />
 
-            <MenuList lineHeight="20px">
-              <MenuGroup title="Action" as={Box} fontSize="8pt">
-                <MenuItem
-                  fontSize="10pt"
-                  onClick={() => handleValueDiffDetail({}, { showForm: true })}
-                >
-                  Show mismatched values...
-                </MenuItem>
-                <MenuItem
-                  fontSize="10pt"
-                  onClick={() =>
-                    handleValueDiffDetail(
-                      { columns: [column] },
-                      { showForm: false }
-                    )
-                  }
-                >
-                  Show mismatched values for &apos;{column}&apos;
-                </MenuItem>
-              </MenuGroup>
-            </MenuList>
+            <Portal>
+              <MenuList lineHeight="20px">
+                <MenuGroup title="Action" as={Box} fontSize="8pt">
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={() =>
+                      handleValueDiffDetail({}, { showForm: true })
+                    }
+                  >
+                    Show mismatched values...
+                  </MenuItem>
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={() =>
+                      handleValueDiffDetail(
+                        { columns: [column] },
+                        { showForm: false }
+                      )
+                    }
+                  >
+                    Show mismatched values for &apos;{column}&apos;
+                  </MenuItem>
+                </MenuGroup>
+              </MenuList>
+            </Portal>
           </>
         )}
       </Menu>