diff --git a/packages/dataviews/src/bulk-actions.js b/packages/dataviews/src/bulk-actions.js
index 588e0e0a1fce3d..9613ff37ee1401 100644
--- a/packages/dataviews/src/bulk-actions.js
+++ b/packages/dataviews/src/bulk-actions.js
@@ -7,7 +7,7 @@ import {
Modal,
} from '@wordpress/components';
import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useRef, useCallback } from '@wordpress/element';
/**
* Internal dependencies
@@ -21,24 +21,31 @@ const {
DropdownMenuSeparatorV2: DropdownMenuSeparator,
} = unlock( componentsPrivateApis );
-function ActionWithModal( { action, selectedItems, setActionWithModal } ) {
+function ActionWithModal( {
+ action,
+ selectedItems,
+ setActionWithModal,
+ bulkActionsButtonRef,
+} ) {
const eligibleItems = useMemo( () => {
return selectedItems.filter( ( item ) => action.isEligible( item ) );
}, [ action, selectedItems ] );
const { RenderModal, hideModalHeader } = action;
+ const onCloseModal = useCallback( () => {
+ setActionWithModal( undefined );
+ // Focus the bulk actions button.
+ if ( bulkActionsButtonRef?.current?.focus ) {
+ bulkActionsButtonRef.current.focus();
+ }
+ }, [ setActionWithModal, bulkActionsButtonRef ] );
return (
{
- setActionWithModal( undefined );
- } }
+ onRequestClose={ onCloseModal }
overlayClassName="dataviews-action-modal"
>
- setActionWithModal( undefined ) }
- />
+
);
}
@@ -48,6 +55,7 @@ function BulkActionItem( {
selectedItems,
onMenuOpenChange,
setActionWithModal,
+ bulkActionsButtonRef,
} ) {
const eligibleItems = useMemo( () => {
return selectedItems.filter( ( item ) => action.isEligible( item ) );
@@ -63,6 +71,10 @@ function BulkActionItem( {
setActionWithModal( action );
} else {
await action.callback( eligibleItems );
+ // Click the bulk actions button to close the dropdown and focus the button.
+ if ( bulkActionsButtonRef?.current?.click ) {
+ bulkActionsButtonRef.current.click();
+ }
}
} }
suffix={
@@ -79,6 +91,7 @@ function ActionsMenuGroup( {
selectedItems,
onMenuOpenChange,
setActionWithModal,
+ bulkActionsButtonRef,
} ) {
return (
<>
@@ -90,6 +103,7 @@ function ActionsMenuGroup( {
selectedItems={ selectedItems }
onMenuOpenChange={ onMenuOpenChange }
setActionWithModal={ setActionWithModal }
+ bulkActionsButtonRef={ bulkActionsButtonRef }
/>
) ) }
@@ -117,6 +131,7 @@ export default function BulkActions( {
selection.includes( getItemId( item ) )
);
}, [ selection, data, getItemId ] );
+ const bulkActionsButtonRef = useRef();
if ( bulkActions.length === 0 ) {
return null;
}
@@ -127,7 +142,12 @@ export default function BulkActions( {
onOpenChange={ onMenuOpenChange }
label={ __( 'Filters' ) }
trigger={
-