Merge pull request #582 from DataRecce/feature/drc-996-when-i-click-s…

…how-mismatched-value-the-ui-component-flashing [Chore] Replace Menu with IconButton in Value Diff Result View
DataRecce · Jan 16, 2025 · bf4e788 · bf4e788
2 parents c7b7d8e + e52e384
commit bf4e788
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>