[EuiBasicTable] Pass click events to actions onClick

changelogs/upcoming/7667.md

@@ -0,0 +1 @@
+- Updated `EuiBasicTable` and `EuiInMemoryTable`'s `columns[].actions[]`'s to pass back click events to `onClick` callbacks as the second callback

src/components/basic_table/action_types.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, MouseEvent } from 'react';
 import { EuiIconType } from '../icon/icon';
 import { EuiButtonIconProps } from '../button/button_icon/button_icon';
 import { EuiButtonEmptyProps } from '../button/button_empty';
@@ -26,9 +26,11 @@ export interface DefaultItemActionBase<T extends object> {
    */
   description: string | ((item: T) => string);
   /**
-   * A handler function to execute the action
+   * A handler function to execute the action. Passes back the current row
+   * item as the first argument, and the originating React click event
+   * as a second argument.
    */
-  onClick?: (item: T) => void;
+  onClick?: (item: T, event: MouseEvent) => void;
   href?: string | ((item: T) => string);
   target?: string;
   /**

src/components/basic_table/collapsed_item_actions.test.tsx

@@ -84,6 +84,48 @@ describe('CollapsedItemActions', () => {
     await waitForEuiPopoverClose();
   });
 
+  test('default actions - passes back the original click event as well as the row item to onClick', async () => {
+    const onClick = jest.fn();
+    const onClickStopPropagation = jest.fn((item, event) => {
+      event.stopPropagation();
+    });
+
+    const props = {
+      actions: [
+        {
+          name: '1',
+          description: '',
+          onClick,
+          'data-test-subj': 'onClick',
+        },
+        {
+          name: '2',
+          description: '',
+          onClick: onClickStopPropagation,
+          'data-test-subj': 'onClickStopPropagation',
+        },
+      ],
+      itemId: 'id',
+      item: { id: 'xyz' },
+      actionsDisabled: false,
+    };
+
+    const { getByTestSubject } = render(<CollapsedItemActions {...props} />);
+    fireEvent.click(getByTestSubject('euiCollapsedItemActionsButton'));
+    await waitForEuiPopoverOpen();
+
+    fireEvent.click(getByTestSubject('onClickStopPropagation'));
+    expect(onClickStopPropagation).toHaveBeenCalledWith(
+      props.item,
+      expect.objectContaining({ stopPropagation: expect.any(Function) })
+    );
+    // Popover should still be open if propagation was stopped
+    await waitForEuiPopoverOpen();
+
+    fireEvent.click(getByTestSubject('onClick'));
+    await waitForEuiPopoverClose();
+  });
+
   test('custom actions', async () => {
     const props = {
       actions: [

src/components/basic_table/collapsed_item_actions.tsx

@@ -14,7 +14,6 @@ import React, {
   ReactElement,
 } from 'react';
 
-import { isString } from '../../services/predicate';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
@@ -45,11 +44,7 @@ export const CollapsedItemActions = <T extends {}>({
   className,
 }: CollapsedItemActionsProps<T>) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const onClickItem = useCallback((onClickAction?: () => void) => {
-    setPopoverOpen(false);
-    onClickAction?.();
-  }, []);
+  const closePopover = useCallback(() => setPopoverOpen(false), []);
 
   const controls = useMemo(() => {
     return actions.reduce<ReactElement[]>((controls, action, index) => {
@@ -69,16 +64,13 @@ export const CollapsedItemActions = <T extends {}>({
             key={index}
             className="euiBasicTable__collapsedCustomAction"
           >
-            <span onClick={() => onClickItem()}>{actionControl}</span>
+            <span onClick={closePopover}>{actionControl}</span>
           </EuiContextMenuItem>
         );
       } else {
-        const buttonIcon = action.icon;
-        let icon;
-        if (buttonIcon) {
-          icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
-        }
-
+        const icon = action.icon
+          ? callWithItemIfFunction(item)(action.icon)
+          : undefined;
         const buttonContent = callWithItemIfFunction(item)(action.name);
         const toolTipContent = callWithItemIfFunction(item)(action.description);
         const href = callWithItemIfFunction(item)(action.href);
@@ -97,9 +89,12 @@ export const CollapsedItemActions = <T extends {}>({
             target={target}
             icon={icon}
             data-test-subj={dataTestSubj}
-            onClick={() =>
-              onClickItem(onClick ? () => onClick(item) : undefined)
-            }
+            onClick={(event) => {
+              event.persist();
+              onClick?.(item, event);
+              // Allow consumer events to prevent the popover from closing if necessary
+              if (!event.isPropagationStopped()) closePopover();
+            }}
             toolTipContent={toolTipContent}
             toolTipProps={{ delay: 'long' }}
           >
@@ -109,7 +104,7 @@ export const CollapsedItemActions = <T extends {}>({
       }
       return controls;
     }, []);
-  }, [actions, actionsDisabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, closePopover]);
 
   const popoverButton = (
     <EuiI18n
@@ -153,7 +148,7 @@ export const CollapsedItemActions = <T extends {}>({
       id={`${itemId}-actions`}
       isOpen={popoverOpen}
       button={withTooltip || popoverButton}
-      closePopover={() => setPopoverOpen(false)}
+      closePopover={closePopover}
       panelPaddingSize="none"
       anchorPosition="leftCenter"
     >

src/components/basic_table/default_item_action.test.tsx

@@ -122,4 +122,30 @@ describe('DefaultItemAction', () => {
     await waitForEuiToolTipVisible();
     expect(getByText('goodbye tooltip')).toBeInTheDocument();
   });
+
+  it('passes back the original click event as well as the row item to onClick', () => {
+    const onClick = jest.fn((item, event) => {
+      event.preventDefault();
+    });
+
+    const action: EmptyButtonAction<Item> = {
+      name: 'onClick',
+      description: 'test',
+      onClick,
+      'data-test-subj': 'onClick',
+    };
+    const props = {
+      action,
+      enabled: true,
+      item: { id: 'xyz' },
+    };
+
+    const { getByTestSubject } = render(<DefaultItemAction {...props} />);
+
+    fireEvent.click(getByTestSubject('onClick'));
+    expect(onClick).toHaveBeenCalledWith(
+      props.item,
+      expect.objectContaining({ preventDefault: expect.any(Function) })
+    );
+  });
 });

src/components/basic_table/default_item_action.tsx

@@ -6,9 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, MouseEvent, useCallback } from 'react';
 
-import { isString } from '../../services/predicate';
 import {
   EuiButtonEmpty,
   EuiButtonIcon,
@@ -42,28 +41,29 @@ export const DefaultItemAction = <T extends object>({
       or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback`);
   }
 
-  const onClick = action.onClick ? () => action.onClick!(item) : undefined;
-
-  const buttonColor = action.color;
-  let color: EuiButtonIconProps['color'] = 'primary';
-  if (buttonColor) {
-    color = isString(buttonColor) ? buttonColor : buttonColor(item);
-  }
-
-  const buttonIcon = action.icon;
-  let icon;
-  if (buttonIcon) {
-    icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
-  }
+  const onClick = useCallback(
+    (event: MouseEvent) => {
+      if (!action.onClick) return;
+      event.persist(); // TODO: Remove once React 16 support is dropped
+      action.onClick!(item, event);
+    },
+    [action.onClick, item]
+  );
 
-  let button;
+  const color: EuiButtonIconProps['color'] = action.color
+    ? callWithItemIfFunction(item)(action.color)
+    : 'primary';
+  const icon = action.icon
+    ? callWithItemIfFunction(item)(action.icon)
+    : undefined;
   const actionContent = callWithItemIfFunction(item)(action.name);
   const tooltipContent = callWithItemIfFunction(item)(action.description);
   const href = callWithItemIfFunction(item)(action.href);
   const dataTestSubj = callWithItemIfFunction(item)(action['data-test-subj']);
 
   const ariaLabelId = useGeneratedHtmlId();
   let ariaLabelledBy: ReactNode;
+  let button;
 
   if (action.type === 'icon') {
     if (!icon) {