Fix useBulkUpdateController mutationOptions handling

Author: djhi

packages/ra-core/src/controller/button/useBulkUpdateController.tsx

@@ -20,10 +20,7 @@ export const useBulkUpdateController = <
         onSuccess,
         onError,
         mutationMode = 'undoable',
-        mutationOptions = {
-            onSuccess,
-            onError,
-        },
+        mutationOptions = {},
         successMessage,
     } = props;
     const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
@@ -37,40 +34,44 @@ export const useBulkUpdateController = <
         resource,
         undefined,
         {
-            onSuccess: () => {
-                notify(
-                    successMessage ??
-                        `resources.${resource}.notifications.updated`,
-                    {
-                        type: 'info',
-                        messageArgs: {
-                            smart_count: selectedIds.length,
-                            _: translate('ra.notification.updated', {
+            onSuccess:
+                onSuccess ??
+                (() => {
+                    notify(
+                        successMessage ??
+                            `resources.${resource}.notifications.updated`,
+                        {
+                            type: 'info',
+                            messageArgs: {
                                 smart_count: selectedIds.length,
-                            }),
-                        },
-                        undoable: mutationMode === 'undoable',
-                    }
-                );
-                onUnselectItems();
-            },
-            onError: (error: any) => {
-                notify(
-                    typeof error === 'string'
-                        ? error
-                        : error?.message || 'ra.notification.http_error',
-                    {
-                        type: 'error',
-                        messageArgs: {
-                            _:
-                                typeof error === 'string'
-                                    ? error
-                                    : error?.message,
-                        },
-                    }
-                );
-                refresh();
-            },
+                                _: translate('ra.notification.updated', {
+                                    smart_count: selectedIds.length,
+                                }),
+                            },
+                            undoable: mutationMode === 'undoable',
+                        }
+                    );
+                    onUnselectItems();
+                }),
+            onError:
+                onError ??
+                ((error: any) => {
+                    notify(
+                        typeof error === 'string'
+                            ? error
+                            : error?.message || 'ra.notification.http_error',
+                        {
+                            type: 'error',
+                            messageArgs: {
+                                _:
+                                    typeof error === 'string'
+                                        ? error
+                                        : error?.message,
+                            },
+                        }
+                    );
+                    refresh();
+                }),
             ...otherMutationOptions,
         }
     );

packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Resource, TestMemoryRouter } from 'ra-core';
+import { Resource, TestMemoryRouter, useNotify } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { BulkUpdateButton } from './BulkUpdateButton';
 import { AdminContext } from '../AdminContext';
@@ -166,6 +166,47 @@ export const MutationMode = () => (
     />
 );
 
+const MutationOptionsButtons = () => {
+    const notify = useNotify();
+    return (
+        <>
+            <BulkUpdateButton
+                label="Update Undoable"
+                data={{ reads: 0 }}
+                mutationMode="undoable"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully', { undoable: true });
+                    },
+                }}
+            />
+            <BulkUpdateButton
+                label="Update Optimistic"
+                data={{ reads: 0 }}
+                mutationMode="optimistic"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully');
+                    },
+                }}
+            />
+            <BulkUpdateButton
+                label="Update Pessimistic"
+                data={{ reads: 0 }}
+                mutationMode="pessimistic"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully');
+                    },
+                }}
+            />
+        </>
+    );
+};
+export const MutationOptions = () => (
+    <Wrapper bulkActionButtons={<MutationOptionsButtons />} />
+);
+
 export const Themed = () => (
     <Wrapper
         bulkActionButtons={<BulkUpdateButton data={{ reads: 0 }} />}

packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx

@@ -31,7 +31,8 @@ export const BulkUpdateWithUndoButton = (
 
     const { handleUpdate, isPending } = useBulkUpdateController(rest);
 
-    const handleClick = e => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
         handleUpdate(data);
         if (typeof onClick === 'function') {
             onClick(e);