Fix update button cannot be used in a list

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

@@ -1,17 +1,18 @@
-import * as React from 'react';
+import { createMemoryHistory } from 'history';
+import { Resource, useNotify, withLifecycleCallbacks } from 'ra-core';
+import fakeRestDataProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
-import { Resource, useNotify, withLifecycleCallbacks } from 'ra-core';
-import fakeRestDataProvider from 'ra-data-fakerest';
-import { createMemoryHistory } from 'history';
+import * as React from 'react';
 
-import { UpdateButton } from './UpdateButton';
 import { AdminContext } from '../AdminContext';
 import { AdminUI } from '../AdminUI';
-import { NumberField, TextField } from '../field';
 import { Show, SimpleShowLayout } from '../detail';
+import { NumberField, TextField } from '../field';
 import { TopToolbar } from '../layout';
+import { Datagrid, List } from '../list';
+import { UpdateButton } from './UpdateButton';
 
 export default { title: 'ra-ui-materialui/button/UpdateButton' };
 
@@ -44,7 +45,7 @@ const getDataProvider = () =>
                     id: 1,
                     title: 'Lorem Ipsum',
                     body: 'Lorem ipsum dolor sit amet',
-                    views: 1000,
+                    views: 500,
                 },
             ],
             authors: [],
@@ -79,6 +80,29 @@ const PostShow = () => {
     );
 };
 
+const PostList = () => {
+    return (
+        <List>
+            <Datagrid rowClick="show">
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+                <UpdateButton label="Reset views" data={{ views: 0 }} />
+            </Datagrid>
+        </List>
+    );
+};
+
+export const WithAList = () => (
+    <AdminContext dataProvider={getDataProvider()} i18nProvider={i18nProvider}>
+        <AdminUI>
+            {JSON.stringify(getDataProvider())}
+            <Resource name="posts" list={<PostList />} show={<PostShow />} />
+        </AdminUI>
+    </AdminContext>
+);
+
 export const Undoable = () => (
     <AdminContext
         dataProvider={getDataProvider()}

packages/ra-ui-materialui/src/button/UpdateWithUndoButton.spec.tsx

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
-import { MutationMode, CoreAdminContext, testDataProvider } from 'ra-core';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CoreAdminContext, MutationMode, testDataProvider } from 'ra-core';
+import * as React from 'react';
 
-import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
+import { SimpleForm, Toolbar } from '../form';
 import { TextInput } from '../input';
+import { WithAList } from './UpdateButton.stories';
 import { UpdateWithUndoButton } from './UpdateWithUndoButton';
 
 const theme = createTheme();
@@ -58,7 +59,7 @@ describe('<UpdateWithUndoButton />', () => {
             // @ts-ignore
             getOne: () =>
                 Promise.resolve({
-                    data: { id: 123, title: 'lorem', views: 1000 },
+                    data: { id: 123, title: 'lorem', views: 500 },
                 }),
             // @ts-ignore
             update: () => Promise.resolve({ data: { id: 123 } }),
@@ -95,11 +96,23 @@ describe('<UpdateWithUndoButton />', () => {
                     id: 123,
                     data: { views: 0 },
                     meta: undefined,
-                    previousData: { id: 123, title: 'lorem', views: 1000 },
+                    previousData: { id: 123, title: 'lorem', views: 500 },
                     resource: 'posts',
                 },
                 { snapshot: expect.any(Array) }
             );
         });
     });
+
+    it("should'nt open the show page caused by click propagation", async () => {
+        render(<WithAList />);
+        const startedUrl = global.window.location.pathname;
+        const resetButton = await screen.findByRole('button', {
+            name: 'Reset views',
+        });
+        screen.getByText('500');
+        fireEvent.click(resetButton);
+        expect(screen.queryByText('500')).not.toBeNull();
+        expect(global.window.location.pathname).toEqual(startedUrl);
+    });
 });

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

@@ -1,22 +1,21 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { ReactElement } from 'react';
-import PropTypes from 'prop-types';
 import ActionUpdate from '@mui/icons-material/Update';
-import { alpha } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
 import {
-    useRefresh,
-    useNotify,
-    useResourceContext,
     RaRecord,
+    UpdateParams,
+    useNotify,
     useRecordContext,
+    useRefresh,
+    useResourceContext,
     useUpdate,
-    UpdateParams,
 } from 'ra-core';
+import * as React from 'react';
+import { ReactElement } from 'react';
 import { UseMutationOptions } from 'react-query';
 
-import { Button, ButtonProps } from './Button';
 import { BulkActionProps } from '../types';
+import { Button, ButtonProps } from './Button';
 
 export const UpdateWithUndoButton = (props: UpdateWithUndoButtonProps) => {
     const record = useRecordContext(props);
@@ -80,6 +79,7 @@ export const UpdateWithUndoButton = (props: UpdateWithUndoButtonProps) => {
         if (typeof onClick === 'function') {
             onClick(e);
         }
+        e.stopPropagation();
     };
 
     return (