Skip to content

Commit a510725

Browse files
committed
Fix <SimpleList> throws an error when no data in standalone mode
## Problem Since marmelab#10184, published in 5.2.0, `<SimpleList>` and `<Datagrid>` throw an error when used in standalone mode (i.e., outside of a ListContext) with an empty `data`. ## Solution The problem comes from `ListNoResults`, which reads the `ListContext` to determine if there is an active filter. ## Solution Use the alternative `useListContextWithProps` instead of `useListContext`.
1 parent 60bae65 commit a510725

File tree

3 files changed

+47
-4
lines changed

3 files changed

+47
-4
lines changed

packages/ra-ui-materialui/src/list/ListNoResults.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { CardContent, Typography } from '@mui/material';
33
import {
44
useGetResourceLabel,
5-
useListContext,
5+
useListContextWithProps,
66
useResourceContext,
77
useTranslate,
88
} from 'ra-core';
@@ -12,7 +12,7 @@ import { Button } from '../button';
1212
export const ListNoResults = () => {
1313
const translate = useTranslate();
1414
const resource = useResourceContext();
15-
const { filterValues, setFilters } = useListContext();
15+
const { filterValues, setFilters } = useListContextWithProps();
1616
const getResourceLabel = useGetResourceLabel();
1717
if (!resource) {
1818
throw new Error(
@@ -22,7 +22,9 @@ export const ListNoResults = () => {
2222
return (
2323
<CardContent>
2424
<Typography variant="body2">
25-
{filterValues && Object.keys(filterValues).length > 0 ? (
25+
{filterValues &&
26+
setFilters &&
27+
Object.keys(filterValues).length > 0 ? (
2628
<>
2729
{translate('ra.navigation.no_filtered_results', {
2830
resource,

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import { ListContext, ResourceContextProvider } from 'ra-core';
1111
import { AdminContext } from '../../AdminContext';
1212
import { SimpleList } from './SimpleList';
1313
import { TextField } from '../../field/TextField';
14-
import { NoPrimaryText } from './SimpleList.stories';
14+
import {
15+
NoPrimaryText,
16+
Standalone,
17+
StandaloneEmpty,
18+
} from './SimpleList.stories';
1519
import { Basic } from '../filter/FilterButton.stories';
1620

1721
const Wrapper = ({ children }: any) => (
@@ -193,4 +197,15 @@ describe('<SimpleList />', () => {
193197
render(<NoPrimaryText />);
194198
await screen.findByText('War and Peace');
195199
});
200+
201+
describe('standalone', () => {
202+
it('should work without a ListContext', async () => {
203+
render(<Standalone />);
204+
await screen.findByText('War and Peace');
205+
});
206+
it('should display a message when there is no result', async () => {
207+
render(<StandaloneEmpty />);
208+
await screen.findByText('No results found.');
209+
});
210+
});
196211
});

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,3 +201,29 @@ export const FullAppInError = () => (
201201
</AdminUI>
202202
</AdminContext>
203203
);
204+
205+
export const Standalone = () => (
206+
<TestMemoryRouter>
207+
<SimpleList
208+
data={data.books}
209+
primaryText={record => record.title}
210+
secondaryText={record => record.author}
211+
tertiaryText={record => record.year}
212+
linkType={false}
213+
/>
214+
</TestMemoryRouter>
215+
);
216+
217+
export const StandaloneEmpty = () => (
218+
<TestMemoryRouter>
219+
<ResourceContextProvider value="books">
220+
<SimpleList<any>
221+
data={[]}
222+
primaryText={record => record.title}
223+
secondaryText={record => record.author}
224+
tertiaryText={record => record.year}
225+
linkType={false}
226+
/>
227+
</ResourceContextProvider>
228+
</TestMemoryRouter>
229+
);

0 commit comments

Comments
 (0)