Repository: mui/material-ui (TypeScript) — Bug Fix

Issue:
[Pagination] clicking on "..." triggers onChange with page equals to null (v5)
<!-- Provide a general summary of the issue in the Title above -->

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](https://user-images.githubusercontent.com/9304909/136098165-0f705115-d31f-4309-b26e-823068027548.png)

So when migrating to v5, I need to add a safety check for `page !== null` before setting current `page` value.

<!--
  Thank you very much for contributing to MUI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

Clicking on `...` triggers `onChange` with `page` equals to `null`.
<!-- Describe what happens instead of the expected behavior. -->

## 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.
<!-- Describe what should happen. -->

## Steps to Reproduce 🕹

<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  You should use the official codesandbox template as a starting point: https://mui.com/r/issue-template-next

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://mui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->

```tsx
<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 🔦

<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->

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 🌎

<!--
  Run `npx @mui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
<details>
  <summary>`npx @mui/envinfo`</summary>
  
```
  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
```
</details>



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

Resolving patch:
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -290,7 +290,6 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
       ref={ref}
       ownerState={ownerState}
       className={clsx(classes.root, className)}
-      {...other}
     >
       …
     </PaginationItemEllipsis>


Test patch:
diff --git a/packages/mui-material/src/Pagination/Pagination.test.js b/packages/mui-material/src/Pagination/Pagination.test.js
--- a/packages/mui-material/src/Pagination/Pagination.test.js
+++ b/packages/mui-material/src/Pagination/Pagination.test.js
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
 import { describeConformance, createClientRender } from 'test/utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Pagination, { paginationClasses as classes } from '@mui/material/Pagination';
+import { paginationItemClasses } from '@mui/material/PaginationItem';
 
 describe('<Pagination />', () => {
   const render = createClientRender();
@@ -47,6 +48,16 @@ describe('<Pagination />', () => {
     expect(handleChange.callCount).to.equal(1);
   });
 
+  it('should not fire onChange when an ellipsis div is clicked', () => {
+    const handleChange = spy();
+    const { container } = render(<Pagination count={10} onChange={handleChange} page={1} />);
+
+    const ellipsisDiv = container.querySelector(`.${paginationItemClasses.ellipsis}`);
+    ellipsisDiv.click();
+
+    expect(handleChange.callCount).to.equal(0);
+  });
+
   it('renders controls with correct order in rtl theme', () => {
     const { getAllByRole } = render(
       <ThemeProvider