feat: blur quick jumper input to change current item

package.json

@@ -54,7 +54,7 @@
     "now-build": "npm run build"
   },
   "devDependencies": {
-    "core-js": "^3.0.0",
+    "core-js": "^3.1.4",
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
     "rc-select": "9.x",

src/Options.jsx

@@ -22,12 +22,13 @@ class Options extends React.Component {
     pageSizeOptions: ['10', '20', '30', '40'],
   };
 
-  constructor(props) {
-    super(props);
+  state = {
+    goInputText: '',
+  };
 
-    this.state = {
-      goInputText: '',
-    };
+  getValidValue() {
+    const { goInputText, current } = this.state;
+    return isNaN(goInputText) ? current : Number(goInputText);
   }
 
   buildOptionText = (value) => {
@@ -44,17 +45,24 @@ class Options extends React.Component {
     });
   }
 
+  handleBlur = () => {
+    const { goButton, quickGo } = this.props;
+    if (goButton) {
+      return;
+    }
+    quickGo(this.getValidValue());
+  }
+
   go = (e) => {
-    let val = this.state.goInputText;
-    if (val === '') {
+    const { goInputText } = this.state;
+    if (goInputText === '') {
       return;
     }
-    val = isNaN(val) ? this.props.current : Number(val);
     if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
       this.setState({
         goInputText: '',
       });
-      this.props.quickGo(val);
+      this.props.quickGo(this.getValidValue());
     }
   }
 
@@ -128,6 +136,7 @@ class Options extends React.Component {
             value={goInputText}
             onChange={this.handleChange}
             onKeyUp={this.go}
+            onBlur={this.handleBlur}
           />
           {locale.page}
           {gotoButton}

src/Pagination.jsx

@@ -171,6 +171,20 @@ class Pagination extends React.Component {
     return iconNode;
   }
 
+  getValidValue(e) {
+    const inputValue = e.target.value;
+    const { currentInputValue } = this.state;
+    let value;
+    if (inputValue === '') {
+      value = inputValue;
+    } else if (isNaN(Number(inputValue))) {
+      value = currentInputValue;
+    } else {
+      value = Number(inputValue);
+    }
+    return value;
+  }
+
   savePaginationNode = (node) => {
     this.paginationNode = node;
   }
@@ -194,24 +208,13 @@ class Pagination extends React.Component {
   }
 
   handleKeyUp = (e) => {
-    const inputValue = e.target.value;
-    const currentInputValue = this.state.currentInputValue;
-    let value;
-
-    if (inputValue === '') {
-      value = inputValue;
-    } else if (isNaN(Number(inputValue))) {
-      value = currentInputValue;
-    } else {
-      value = Number(inputValue);
-    }
-
+    const value = this.getValidValue(e);
+    const { currentInputValue } = this.state;
     if (value !== currentInputValue) {
       this.setState({
         currentInputValue: value,
       });
     }
-
     if (e.keyCode === KEYCODE.ENTER) {
       this.handleChange(value);
     } else if (e.keyCode === KEYCODE.ARROW_UP) {

tests/Pagination.spec.js

@@ -54,6 +54,7 @@ describe('Uncontrolled Pagination', () => {
 
   afterEach(() => {
     ReactDOM.unmountComponentAtNode(container);
+    current = 1;
   });
 
   it('default current page is 1', () => {
@@ -135,8 +136,7 @@ describe('Uncontrolled Pagination', () => {
     expect(TestUtils.isDOMComponent(quickJumper)).to.be(true);
     expect(TestUtils.isDOMComponent(input)).to.be(true);
     expect(TestUtils.isDOMComponent(goButton)).to.be(true);
-    input.value = '2';
-    Simulate.change(input);
+    Simulate.change(input, { target: { value: '2' } });
     setTimeout(() => {
       Simulate.click(goButton);
       setTimeout(() => {
@@ -148,6 +148,46 @@ describe('Uncontrolled Pagination', () => {
     }, 10);
   });
 
+  // https://github.com/ant-design/ant-design/issues/17763
+  it('should not jump when blur input when there is goButton', (done) => {
+    const quickJumper = TestUtils.findRenderedDOMComponentWithClass(
+      pagination,
+      'rc-pagination-options-quick-jumper'
+    );
+    const input = quickJumper.querySelector('input');
+    Simulate.change(input, { target: { value: '2' } });
+    setTimeout(() => {
+      Simulate.blur(input);
+      setTimeout(() => {
+        expect(pagination.state.current).to.be(1);
+        expect(current).to.be(1);
+        done();
+      }, 10);
+    }, 10);
+  });
+
+  // https://github.com/ant-design/ant-design/issues/17763
+  it('should not jump when blur input when there is not goButton', (done) => {
+    ReactDOM.render(
+      <Pagination pageSize={10} total={20} showQuickJumper />,
+      container,
+      function () {
+        const quickJumper = TestUtils.findRenderedDOMComponentWithClass(
+          this, 'rc-pagination-options-quick-jumper',
+        );
+        const input = quickJumper.querySelector('input');
+        Simulate.change(input, { target: { value: '2' } });
+        setTimeout(() => {
+          Simulate.blur(input);
+          setTimeout(() => {
+            expect(this.state.current).to.be(2);
+            done();
+          }, 10);
+        }, 10);
+      },
+    );
+  });
+
   // https://github.com/ant-design/ant-design/issues/15539
   it('should hide quick jumper when only one page', (done) => {
     ReactDOM.render(