Fix the table actions dropdown edgecases

streamshub · Jan 8, 2024 · 7522a6b · 7522a6b
1 parent fe9b08f
commit 7522a6b
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/ui/components/table/ResponsiveTable.tsx b/ui/components/table/ResponsiveTable.tsx
@@ -289,7 +289,11 @@ export const ResponsiveTable = <TRow, TCol>({
                 : `actions-for-row-${rowIndex}`
             }
           >
-            {renderActions({ rowIndex, row, ActionsColumn })}
+            {renderActions({
+              rowIndex,
+              row,
+              ActionsColumn: BoundActionsColumn,
+            })}
           </ResponsiveTd>
         );
         const rowExpanded = expanded[rowIndex] !== undefined;
@@ -464,3 +468,23 @@ export const DeletableRow = memo<DeletableRowProps>(
   },
 );
 DeletableRow.displayName = "DeletableRow";
+
+const BoundActionsColumn = forwardRef<HTMLElement, ActionsColumnProps>(
+  (props, ref) => {
+    return (
+      <ActionsColumn
+        {...props}
+        popperProps={{
+          enableFlip: true,
+          flipBehavior: ["bottom-end", "top-end"],
+          appendTo: () =>
+            document.getElementsByClassName(
+              "pf-v5-c-scroll-outer-wrapper",
+            )[0] || document.getElementsByTagName("main")[0],
+        }}
+        ref={ref}
+      />
+    );
+  },
+);
+BoundActionsColumn.displayName = "ActionsColumn";