On a <List>, a 'perPage' other than 5, 10 or 25 triggers a MUI warning

[gdoyer-oxv]

What you were expecting:

I should be able to set any value for 'perPage' on a component without having my console flooded with unnecessary warnings.

What happened instead:

When setting a 'perPage' value to 50, in my console, I can see a warning: Material-UI: you have provided an out-of-range value50for the select component. Consider providing a value that matches one of the available options or ''. The available values are5,10,25.

Steps to reproduce: Set a 'perPage' value to 50 on any component.

Proposed fix: I suppose the issue to come from <TablePagination> component and suggest instead of this: rowsPerPageOptions={rowsPerPageOptions} to have something like this: rowsPerPageOptions={[ ...new Set(rowsPerPageOptions.concat(perPage)) ].sort()} We add the set 'perPage' to the list of default options, removing duplicates, and sorting the resulting list.

[ThieryMichel]

Thanks for the issue

[fzaninotto]

I can't reproduce the issue on v3 - I see no warning in the console when I set a perPage value that isn't in the rowsPerPageOptions. Please provide a CodeSandbox reproducing the issue.

[ThieryMichel]

Additionaly when setting a perPage of 50 the value 50 does not appear in the perpage selector of the pagination component.

[fzaninotto]

I suspect that the problem only appears with certain material-ui versions. We don't reproduce with mui 4.3, could you please post you mui version?

[liviozanol]

I was also having this issue. It was ocurring if I set the perPage on the List element.

To get rid of the warning I had to create a custom Pagination element and attach it to the List element like this:

const PostPagination = props => <Pagination rowsPerPageOptions={[]} {...props} />;

<List {...props}  pagination={<PostPagination />} perPage={200}>

[thomas-cleany]

I suspect that the problem only appears with certain material-ui versions. We don't reproduce with mui 4.3, could you please post you mui version?

Happens in 4.8.3 !

[JulienMattiussi]

@gdoyer-oxv @thomas-cleany This warning only triggers if you try to set a perPage value that isn't allowed in your pagination Component.

Material-UI: you have provided an out-of-range value50for the select component.

The default pagination component in react-admin only have 5, 10 and 25 for possible values.

As have written @liviozanol, if you want to set another value, you just have to specify a custom pagination component including all your desired values.

import { Pagination } from 'react-admin';
const MyPagination = props => (
    <Pagination rowsPerPageOptions={[10, 25, 50, 100]} {...props} />
);

<List
     {...props}
     perPage={50}
     pagination={<MyPagination />}
/>

With this solution, no warning anymore.

You can check the doc for further information about it https://marmelab.com/react-admin/doc/3.2/List.html#pagination

I close this issue. Feel free to open another if you see some different abnormal or unexpected behaviour

[gdoyer-oxv]

Would you not consider implementing the fix I proposed?

It would remove the warning without having all of us that use paginations with more than 25 items, which by itsef is a pretty low number, to remove this warning without having to overwrite the default component with something that in fact, does not add any new feature/behavior but is just an ugly workaround.

Plus the fact that the documentation for 'perPage' does not state that we should only use 'allowed' values 10, 25, 50, 100, thus we can assume any value may be considered valid, which is not the case.