fix: blur goto input should reset to 1 (#404)

afc163 · web-flow · commit b4de86f97483 · 2022-04-28T17:00:20.000+08:00
* fix: blur goto input should came back to `1` close ant-design/ant-design#35118 * update demo file name
diff --git a/docs/demo/basic.md b/docs/demo/basic.md
@@ -0,0 +1,3 @@
+## simple
+
+<code src="../examples/simple.jsx">
diff --git a/docs/demo/controlled.md b/docs/demo/controlled.md
@@ -0,0 +1,3 @@
+## default
+
+<code src="../examples/controlled.jsx">
diff --git a/docs/demo/default.md b/docs/demo/default.md
diff --git a/docs/demo/simple.md b/docs/demo/simple.md
@@ -1,3 +1,3 @@
-## simple
+## stupid
 
 <code src="../examples/simple.jsx">
diff --git a/docs/demo/stupid.md b/docs/demo/stupid.md
diff --git a/docs/examples/basic.jsx b/docs/examples/basic.jsx
@@ -0,0 +1,19 @@
+import '../../assets/index.less';
+import React from 'react';
+import Pagination from 'rc-pagination';
+
+const App = () => (
+  <>
+    <Pagination total={25} />
+    <Pagination total={50} />
+    <Pagination total={60} />
+    <Pagination total={70} />
+    <Pagination total={80} />
+    <Pagination total={90} />
+    <Pagination total={100} />
+    <Pagination total={120} />
+    <Pagination total={500} />
+  </>
+);
+
+export default App;
diff --git a/docs/examples/controlled.jsx b/docs/examples/controlled.jsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import Pagination from 'rc-pagination';
+import '../../assets/index.less';
+import 'rc-select/assets/index.less';
+
+const App = () => {
+  const [current, setCurrent] = useState(1);
+  const onChange = page => {
+    setCurrent(page);
+  };
+  return (
+    <Pagination
+      onChange={onChange}
+      current={current}
+      total={25}
+    />
+  );
+};
+
+export default App;
diff --git a/docs/examples/default.jsx b/docs/examples/default.jsx
diff --git a/docs/examples/simple.jsx b/docs/examples/simple.jsx
@@ -1,19 +1,5 @@
-import '../../assets/index.less';
 import React from 'react';
 import Pagination from 'rc-pagination';
+import '../../assets/index.less';
 
-const App = () => (
-  <>
-    <Pagination total={25} />
-    <Pagination total={50} />
-    <Pagination total={60} />
-    <Pagination total={70} />
-    <Pagination total={80} />
-    <Pagination total={90} />
-    <Pagination total={100} />
-    <Pagination total={120} />
-    <Pagination total={500} />
-  </>
-);
-
-export default App;
+export default () => <Pagination simple defaultCurrent={1} total={50} />;
diff --git a/docs/examples/stupid.jsx b/docs/examples/stupid.jsx
diff --git a/src/Pagination.jsx b/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 = page;
       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 = () => {
diff --git a/tests/simple.test.js b/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);
   });

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## simple`
	`2`	`+`
	`3`	`+<code src="../examples/simple.jsx">`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## default`
	`2`	`+`
	`3`	`+<code src="../examples/controlled.jsx">`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-## simple`
	`1`	`+## stupid`
`2`	`2`
`3`	`3`	`<code src="../examples/simple.jsx">`