Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Pagination] When i change page manually, Pagination component render many PaginationItem instead a few #43542

Closed
b310L opened this issue Aug 31, 2024 · 6 comments
Labels
component: pagination This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material support: Stack Overflow Please ask the community on Stack Overflow

Comments

@b310L
Copy link

b310L commented Aug 31, 2024

Steps to reproduce

Link to live example: https://stackblitz.com/edit/stackblitz-starters-sgbeob?file=package.json,src%2FApp.tsx

Steps:
1.
2.
3.

Current behavior

When i change page manually Pagination component render many PaginationItem instead a few.

Expected behavior

I expect work such before

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

</det
paginate_error
ails>

Search keywords: pagination

@b310L b310L added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 31, 2024
@ZeeshanTamboli
Copy link
Member

Could you provide a minimal reproduction? It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 31, 2024
@oliviertassinari oliviertassinari added the component: pagination This is the name of the generic UI component, not the React module! label Aug 31, 2024
@oliviertassinari oliviertassinari changed the title When i change page manually, Pagination component render many PaginationItem instead a few. When i change page manually, Pagination component render many PaginationItem instead a few Aug 31, 2024
@oliviertassinari oliviertassinari changed the title When i change page manually, Pagination component render many PaginationItem instead a few [pagination] When i change page manually, Pagination component render many PaginationItem instead a few Aug 31, 2024
@b310L
Copy link
Author

b310L commented Sep 1, 2024

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Sep 1, 2024
@ZeeshanTamboli
Copy link
Member

The issue is that you're passing page as a string to the Pagination component, so it's not being calculated correctly. Change it from a string to a number when setting the state:

- setPage(pageInputRef?.current?.value);
+ setPage(Number(pageInputRef?.current?.value));

See the updated StackBlitz: https://stackblitz.com/edit/stackblitz-starters-a6ycet?file=src%2FApp.tsx


I expect work such before

Are you saying it worked in a previous version?

@ZeeshanTamboli ZeeshanTamboli added support: Stack Overflow Please ask the community on Stack Overflow package: material-ui Specific to @mui/material and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 3, 2024
Copy link

github-actions bot commented Sep 3, 2024

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

@ZeeshanTamboli ZeeshanTamboli changed the title [pagination] When i change page manually, Pagination component render many PaginationItem instead a few [material-ui][Pagination] When i change page manually, Pagination component render many PaginationItem instead a few Sep 3, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 3, 2024
@b310L
Copy link
Author

b310L commented Sep 3, 2024 via email

@ZeeshanTamboli
Copy link
Member

The page prop in the Pagination component accepts a number. The input value (HTMLInputElement.value) which you access through ref is a string. So internally it is a number.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pagination This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material support: Stack Overflow Please ask the community on Stack Overflow
Projects
None yet
Development

No branches or pull requests

4 participants