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

[Pagination] clicking on "..." triggers onChange with page equals to null (v5) #28853

Closed
2 tasks done
kykungz opened this issue Oct 5, 2021 · 1 comment · Fixed by #28884
Closed
2 tasks done

[Pagination] clicking on "..." triggers onChange with page equals to null (v5) #28853

kykungz opened this issue Oct 5, 2021 · 1 comment · Fixed by #28884
Assignees
Labels
component: pagination This is the name of the generic UI component, not the React module! regression A bug, but worse

Comments

@kykungz
Copy link

kykungz commented Oct 5, 2021

Clicking on ... triggers Pagination onChange with page equals to null. This behavior does not appear in v4.
Screen Shot 2564-10-06 at 03 31 09

So when migrating to v5, I need to add a safety check for page !== null before setting current page value.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Clicking on ... triggers onChange with page equals to null.

Expected Behavior 🤔

Clicking on ... should not trigger any event since it is just a label. Otherwise we always need to check for page !== null on every controlled Pagination.

Steps to Reproduce 🕹

<Pagination
  count={20}
  page={page}
  onChange={(_, page) => {
    // Always need safety check for page !== null
    if (page !== null) {
      setPage(page);
    }
  }}
/>

https://codesandbox.io/s/reverent-sun-e2kwy?file=/src/Demo.tsx

Context 🔦

This behavior does not appear in v4, not sure if this is a new intended behavior, but having to check for null on every Pagination seems not very convenient.

Your Environment 🌎

`npx @mui/envinfo`
  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 16.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.11 - /opt/homebrew/bin/yarn
    npm: 7.20.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Not Found
    Firefox: 91.0.1
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.49
    @mui/icons-material: ^5.0.1 => 5.0.1
    @mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.49
    @mui/material: ^5.0.2 => 5.0.2
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/styles: ^5.0.1 => 5.0.1
    @mui/system:  5.0.2
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @types/react: ^17.0.24 => 17.0.24
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.4.3 => 4.4.3
@kykungz kykungz added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 5, 2021
@michaldudak michaldudak added component: pagination This is the name of the generic UI component, not the React module! regression A bug, but worse and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 6, 2021
@michaldudak
Copy link
Member

Thanks for the report. It shouldn't work like this indeed.

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! regression A bug, but worse
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants