fix(ui): toggle list selections off on successful bulk action

packages/ui/src/elements/EditMany/DrawerContent.tsx

@@ -29,9 +29,9 @@ import { useTranslation } from '../../providers/Translation/index.js'
 import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js'
 import { parseSearchParams } from '../../utilities/parseSearchParams.js'
 import { FieldSelect } from '../FieldSelect/index.js'
-import { baseClass, type EditManyProps } from './index.js'
 import './index.scss'
 import '../../forms/RenderFields/index.scss'
+import { baseClass, type EditManyProps } from './index.js'
 
 const Submit: React.FC<{
   readonly action: string
@@ -123,6 +123,10 @@ type EditManyDrawerContentProps = {
    * The IDs of the selected items
    */
   ids?: (number | string)[]
+  /**
+   * The function to call after a successful action
+   */
+  onSuccess?: () => void
   /**
    * Whether all items are selected
    */
@@ -143,6 +147,7 @@ export const EditManyDrawerContent: React.FC<EditManyDrawerContentProps> = (prop
     count,
     drawerSlug,
     ids,
+    onSuccess: onSuccessFromProps,
     selectAll,
     selectedFields,
     setSelectedFields,
@@ -263,6 +268,10 @@ export const EditManyDrawerContent: React.FC<EditManyDrawerContentProps> = (prop
     )
     clearRouteCache()
     closeModal(drawerSlug)
+
+    if (typeof onSuccessFromProps === 'function') {
+      onSuccessFromProps()
+    }
   }
 
   const onFieldSelect = useCallback<OnFieldSelect>(

packages/ui/src/elements/EditMany/index.tsx

@@ -22,12 +22,13 @@ export type EditManyProps = {
 }
 
 export const EditMany: React.FC<EditManyProps> = (props) => {
-  const { count, selectAll, selected } = useSelection()
+  const { count, selectAll, selected, toggleAll } = useSelection()
   return (
     <EditMany_v4
       {...props}
       count={count}
       ids={Array.from(selected.keys())}
+      onSuccess={() => toggleAll(false)}
       selectAll={selectAll === SelectAllStatus.AllAvailable}
     />
   )
@@ -37,9 +38,10 @@ export const EditMany_v4: React.FC<
   {
     count: number
     ids: (number | string)[]
+    onSuccess?: () => void
     selectAll: boolean
   } & EditManyProps
-> = ({ collection, count, ids, selectAll }) => {
+> = ({ collection, count, ids, onSuccess, selectAll }) => {
   const { permissions } = useAuth()
   const { openModal } = useModal()
 
@@ -73,6 +75,7 @@ export const EditMany_v4: React.FC<
             count={count}
             drawerSlug={drawerSlug}
             ids={ids}
+            onSuccess={onSuccess}
             selectAll={selectAll}
             selectedFields={selectedFields}
             setSelectedFields={setSelectedFields}

packages/ui/src/elements/PublishMany/DrawerContent.tsx

@@ -20,6 +20,7 @@ import { ConfirmationModal } from '../ConfirmationModal/index.js'
 type PublishManyDrawerContentProps = {
   drawerSlug: string
   ids: (number | string)[]
+  onSuccess?: () => void
   selectAll: boolean
 } & PublishManyProps
 export function PublishManyDrawerContent(props: PublishManyDrawerContentProps) {
@@ -28,6 +29,7 @@ export function PublishManyDrawerContent(props: PublishManyDrawerContentProps) {
     collection: { slug, labels: { plural, singular } } = {},
     drawerSlug,
     ids,
+    onSuccess,
     selectAll,
   } = props
 
@@ -136,6 +138,11 @@ export function PublishManyDrawerContent(props: PublishManyDrawerContentProps) {
             )
 
             clearRouteCache()
+
+            if (typeof onSuccess === 'function') {
+              onSuccess()
+            }
+
             return null
           }
 
@@ -163,6 +170,7 @@ export function PublishManyDrawerContent(props: PublishManyDrawerContentProps) {
     selectAll,
     clearRouteCache,
     addDefaultError,
+    onSuccess,
   ])
 
   return (

packages/ui/src/elements/PublishMany/index.tsx

@@ -15,13 +15,14 @@ export type PublishManyProps = {
 }
 
 export const PublishMany: React.FC<PublishManyProps> = (props) => {
-  const { count, selectAll, selected } = useSelection()
+  const { count, selectAll, selected, toggleAll } = useSelection()
 
   return (
     <PublishMany_v4
       {...props}
       count={count}
       ids={Array.from(selected.keys())}
+      onSuccess={() => toggleAll(false)}
       selectAll={selectAll === SelectAllStatus.AllAvailable}
     />
   )
@@ -30,10 +31,18 @@ export const PublishMany: React.FC<PublishManyProps> = (props) => {
 type PublishMany_v4Props = {
   count: number
   ids: (number | string)[]
+  onSuccess?: () => void
   selectAll: boolean
 } & PublishManyProps
 export const PublishMany_v4: React.FC<PublishMany_v4Props> = (props) => {
-  const { collection, collection: { slug, versions } = {}, count, ids, selectAll } = props
+  const {
+    collection,
+    collection: { slug, versions } = {},
+    count,
+    ids,
+    onSuccess,
+    selectAll,
+  } = props
 
   const { permissions } = useAuth()
   const { t } = useTranslation()
@@ -63,6 +72,7 @@ export const PublishMany_v4: React.FC<PublishMany_v4Props> = (props) => {
         collection={collection}
         drawerSlug={drawerSlug}
         ids={ids}
+        onSuccess={onSuccess}
         selectAll={selectAll}
       />
     </React.Fragment>

packages/ui/src/elements/UnpublishMany/DrawerContent.tsx

@@ -20,6 +20,7 @@ import { ConfirmationModal } from '../ConfirmationModal/index.js'
 type UnpublishManyDrawerContentProps = {
   drawerSlug: string
   ids: (number | string)[]
+  onSuccess?: () => void
   selectAll: boolean
 } & UnpublishManyProps
 
@@ -29,6 +30,7 @@ export function UnpublishManyDrawerContent(props: UnpublishManyDrawerContentProp
     collection: { slug, labels: { plural, singular } } = {},
     drawerSlug,
     ids,
+    onSuccess,
     selectAll,
   } = props
 
@@ -126,6 +128,11 @@ export function UnpublishManyDrawerContent(props: UnpublishManyDrawerContentProp
             )
 
             clearRouteCache()
+
+            if (typeof onSuccess === 'function') {
+              onSuccess()
+            }
+
             return null
           }
 
@@ -153,6 +160,7 @@ export function UnpublishManyDrawerContent(props: UnpublishManyDrawerContentProp
     selectAll,
     clearRouteCache,
     addDefaultError,
+    onSuccess,
   ])
 
   return (

packages/ui/src/elements/UnpublishMany/index.tsx

@@ -15,13 +15,14 @@ export type UnpublishManyProps = {
 }
 
 export const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {
-  const { count, selectAll, selected } = useSelection()
+  const { count, selectAll, selected, toggleAll } = useSelection()
 
   return (
     <UnpublishMany_v4
       {...props}
       count={count}
       ids={Array.from(selected.keys())}
+      onSuccess={() => toggleAll(false)}
       selectAll={selectAll === SelectAllStatus.AllAvailable}
     />
   )
@@ -31,10 +32,18 @@ export const UnpublishMany_v4: React.FC<
   {
     count: number
     ids: (number | string)[]
+    onSuccess?: () => void
     selectAll: boolean
   } & UnpublishManyProps
 > = (props) => {
-  const { collection, collection: { slug, versions } = {}, count, ids, selectAll } = props
+  const {
+    collection,
+    collection: { slug, versions } = {},
+    count,
+    ids,
+    onSuccess,
+    selectAll,
+  } = props
 
   const { t } = useTranslation()
   const { permissions } = useAuth()
@@ -63,6 +72,7 @@ export const UnpublishMany_v4: React.FC<
         collection={collection}
         drawerSlug={drawerSlug}
         ids={ids}
+        onSuccess={onSuccess}
         selectAll={selectAll}
       />
     </React.Fragment>

packages/ui/src/views/List/ListSelection/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig } from 'payload'
 
-import React, { Fragment } from 'react'
+import React, { Fragment, useCallback } from 'react'
 
 import { DeleteMany } from '../../../elements/DeleteMany/index.js'
 import { EditMany_v4 } from '../../../elements/EditMany/index.js'
@@ -27,6 +27,8 @@ export const ListSelection: React.FC<ListSelectionProps> = ({
   const { count, getSelectedIds, selectAll, toggleAll, totalDocs } = useSelection()
   const { t } = useTranslation()
 
+  const onActionSuccess = useCallback(() => toggleAll(false), [toggleAll])
+
   if (count === 0) {
     return null
   }
@@ -53,18 +55,21 @@ export const ListSelection: React.FC<ListSelectionProps> = ({
               collection={collectionConfig}
               count={count}
               ids={getSelectedIds()}
+              onSuccess={onActionSuccess}
               selectAll={selectAll === SelectAllStatus.AllAvailable}
             />
             <PublishMany_v4
               collection={collectionConfig}
               count={count}
               ids={getSelectedIds()}
+              onSuccess={onActionSuccess}
               selectAll={selectAll === SelectAllStatus.AllAvailable}
             />
             <UnpublishMany_v4
               collection={collectionConfig}
               count={count}
               ids={getSelectedIds()}
+              onSuccess={onActionSuccess}
               selectAll={selectAll === SelectAllStatus.AllAvailable}
             />
           </Fragment>