fix(Table): added ActionsColumn prop to control close on click (#10179)

* fix(Table): added ActionsColumn prop to control close on click * Added prop to prevent onOpenChange from being called
patternfly · Mar 26, 2024 · cbbfcf4 · cbbfcf4
1 parent 48d8140
commit cbbfcf4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx
@@ -30,6 +30,8 @@ export interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, '
   innerRef?: React.Ref<any>;
   /** Ref to forward to the first item in the popup menu */
   firstActionItemRef?: React.Ref<HTMLButtonElement>;
+  /** Flag indicating that the dropdown's onOpenChange callback should not be called. */
+  isOnOpenChangeDisabled?: boolean;
 }
 
 const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
@@ -44,6 +46,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   },
   innerRef,
   firstActionItemRef,
+  isOnOpenChangeDisabled = false,
   ...props
 }: ActionsColumnProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -91,7 +94,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
 
       <Dropdown
         isOpen={isOpen}
-        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}
         toggle={(toggleRef: any) =>
           actionsToggle ? (
             actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })
@@ -116,35 +119,37 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
         <DropdownList>
           {items
             .filter((item) => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, tooltipProps, isSeparator, ...props }, index) => {
-              if (isSeparator) {
-                return <Divider key={itemKey || index} data-key={itemKey || index} />;
-              }
-              const item = (
-                <DropdownItem
-                  onClick={(event: any) => {
-                    onActionClick(event, onClick);
-                    onToggle();
-                  }}
-                  {...props}
-                  key={itemKey || index}
-                  data-key={itemKey || index}
-                  ref={index === 0 ? firstActionItemRef : undefined}
-                >
-                  {title}
-                </DropdownItem>
-              );
-
-              if (tooltipProps?.content) {
-                return (
-                  <Tooltip key={itemKey || index} {...tooltipProps}>
-                    {item}
-                  </Tooltip>
+            .map(
+              ({ title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true, ...props }, index) => {
+                if (isSeparator) {
+                  return <Divider key={itemKey || index} data-key={itemKey || index} />;
+                }
+                const item = (
+                  <DropdownItem
+                    onClick={(event: any) => {
+                      onActionClick(event, onClick);
+                      shouldCloseOnClick && onToggle();
+                    }}
+                    {...props}
+                    key={itemKey || index}
+                    data-key={itemKey || index}
+                    ref={index === 0 ? firstActionItemRef : undefined}
+                  >
+                    {title}
+                  </DropdownItem>
                 );
-              } else {
-                return item;
+
+                if (tooltipProps?.content) {
+                  return (
+                    <Tooltip key={itemKey || index} {...tooltipProps}>
+                      {item}
+                    </Tooltip>
+                  );
+                } else {
+                  return item;
+                }
               }
-            })}
+            )}
         </DropdownList>
       </Dropdown>
     </React.Fragment>

diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx
@@ -166,6 +166,8 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
   /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
   isOutsideDropdown?: boolean;
+  /** Flag indicating whether the actions dropdown should close after an item is clicked. */
+  shouldCloseOnClick?: boolean;
 }
 
 export interface ISeparator extends IAction {