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

[b310L]

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

ails>

Search keywords: pagination

[ZeeshanTamboli]

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.

[b310L]

https://stackblitz-starters-jfinqv.stackblitz.io/

[ZeeshanTamboli]

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?

[github-actions]

👋 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.

[b310L]

Thanks. you can internally convert to number for prevent bug.

…

Closed #43542 <#43542> as not planned. — Reply to this email directly, view it on GitHub <#43542 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL3VALH4SPOJXEEOOL3FQCDZUVOLRAVCNFSM6AAAAABNNYRV6KVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJUGEYTAMZQGM3TOMY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ZeeshanTamboli]

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.

[b310L]

I mean to convert number if pass string. Number(...)

…

On Tue, Sep 3, 2024, 12:43 PM Zeeshan Tamboli ***@***.***> wrote: 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. — Reply to this email directly, view it on GitHub <#43542 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL3VALEURU3IODP765IETUTZUV4VDAVCNFSM6AAAAABNNYRV6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRWGAYDMNJXGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ZeeshanTamboli]

I mean to convert number if pass string. Number(...)
…
On Tue, Sep 3, 2024, 12:43 PM Zeeshan Tamboli @.> wrote: 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. — Reply to this email directly, view it on GitHub <#43542 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL3VALEURU3IODP765IETUTZUV4VDAVCNFSM6AAAAABNNYRV6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRWGAYDMNJXGA . You are receiving this because you authored the thread.Message ID: @.>

You shouldn't pass a string value.