fix: blur goto input should came back to 1

close ant-design/ant-design#35118

Author: afc163

docs/examples/default.jsx

@@ -1,28 +1,20 @@
-/* eslint func-names: 0, no-console: 0 */
-import React from 'react';
+import React, { useState } from 'react';
 import Pagination from 'rc-pagination';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
 
-export default class App extends React.Component {
-  state = {
-    current: 3,
+const App = () => {
+  const [current, setCurrent] = useState(1);
+  const onChange = page => {
+    setCurrent(page);
   };
+  return (
+    <Pagination
+      onChange={onChange}
+      current={current}
+      total={25}
+    />
+  );
+};
 
-  onChange = page => {
-    console.log(page);
-    this.setState({
-      current: page,
-    });
-  };
-
-  render() {
-    return (
-      <Pagination
-        onChange={this.onChange}
-        current={this.state.current}
-        total={25}
-      />
-    );
-  }
-}
+export default App;

src/Pagination.jsx

@@ -253,32 +253,31 @@ class Pagination extends React.Component {
     }
   };
 
-  handleChange = (p) => {
-    const { disabled } = this.props;
-
-    let page = p;
+  handleChange = (page) => {
+    const { disabled, onChange } = this.props;
+    const { pageSize, current, currentInputValue } = this.state;
     if (this.isValid(page) && !disabled) {
       const currentPage = calculatePage(undefined, this.state, this.props);
+      let newPage;
       if (page > currentPage) {
-        page = currentPage;
+        newPage = currentPage;
       } else if (page < 1) {
-        page = 1;
+        newPage = 1;
       }
-
       if (!('current' in this.props)) {
         this.setState({
-          current: page,
-          currentInputValue: page,
+          current: newPage,
         });
       }
-
-      const { pageSize } = this.state;
-      this.props.onChange(page, pageSize);
-
-      return page;
+      if (newPage !== currentInputValue) {
+        this.setState({
+          currentInputValue: newPage,
+        });
+      }
+      onChange(newPage, pageSize);
+      return newPage;
     }
-
-    return this.state.current;
+    return current;
   };
 
   prev = () => {

tests/simple.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import Pagination from '../src';
 
@@ -34,6 +34,30 @@ describe('simple Pagination', () => {
     expect(onChange).toBeCalled();
   });
 
+  it('should return to 1 when blur goto input in uncontrol mode', () => {
+    const component = mount(
+      <Pagination simple defaultCurrent={1} total={25} />,
+    );
+    const input = component.find('.rc-pagination-simple').find('input');
+    input.simulate('focus');
+    input.simulate('change', { target: { value: '' } });
+    input.simulate('blur');
+    expect(input.getDOMNode().value).toBe('1');
+  });
+
+  it('should return to 1 when blur goto input in control mode', () => {
+    const App = () => {
+      const [current, setCurrent] = useState(1);
+      return <Pagination simple current={1} total={25} onChange={setCurrent} />;
+    };
+    const component = mount(<App />);
+    const input = component.find('.rc-pagination-simple').find('input');
+    input.simulate('focus');
+    input.simulate('change', { target: { value: '' } });
+    input.simulate('blur');
+    expect(input.getDOMNode().value).toBe('1');
+  });
+
   it('default current page is 1', () => {
     expect(wrapper.state().current).toBe(1);
   });