Add option to specify the input type of QuickJumper

src/Options.tsx

@@ -158,7 +158,7 @@ const Options: React.FC<OptionsProps> = (props) => {
         {locale.jump_to}
         <input
           disabled={disabled}
-          type="text"
+          type="number"
           value={goInputText}
           onChange={handleChange}
           onKeyUp={go}

tests/__snapshots__/demo.test.tsx.snap

@@ -1687,7 +1687,7 @@ exports[`Example jumper 1`] = `
         跳至
         <input
           aria-label="页"
-          type="text"
+          type="number"
           value=""
         />
         页
@@ -1874,7 +1874,7 @@ exports[`Example jumper 1`] = `
         <input
           aria-label="页"
           disabled=""
-          type="text"
+          type="number"
           value=""
         />
         页
@@ -2234,7 +2234,7 @@ exports[`Example jumperWithGoButton 1`] = `
         跳至
         <input
           aria-label="页"
-          type="text"
+          type="number"
           value=""
         />
         页
@@ -2303,7 +2303,7 @@ exports[`Example jumperWithGoButton 1`] = `
         跳至
         <input
           aria-label="页"
-          type="text"
+          type="number"
           value=""
         />
         页
@@ -2776,7 +2776,7 @@ exports[`Example locale 1`] = `
         Go to
         <input
           aria-label="Page"
-          type="text"
+          type="number"
           value=""
         />
         Page
@@ -4020,7 +4020,7 @@ exports[`Example simple 1`] = `
         跳至
         <input
           aria-label="页"
-          type="text"
+          type="number"
           value=""
         />
         页

tests/__snapshots__/options.test.tsx.snap

@@ -50,7 +50,7 @@ exports[`Options should render correctly 1`] = `
     跳至
     <input
       aria-label="页"
-      type="text"
+      type="number"
       value=""
     />
     页

tests/__snapshots__/simple.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j
   跳至
   <input
     aria-label="页"
-    type="text"
+    type="number"
     value=""
   />
   页
@@ -21,7 +21,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j
   跳至
   <input
     aria-label="页"
-    type="text"
+    type="number"
     value=""
   />
   页
@@ -49,7 +49,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j
   跳至
   <input
     aria-label="页"
-    type="text"
+    type="number"
     value=""
   />
   页

tests/jumper.test.tsx

@@ -51,7 +51,7 @@ describe('Pagination with jumper', () => {
     relatedTarget.className = 'rc-pagination-item-link';
     fireEvent.blur(input, { relatedTarget });
 
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue(null);
     expect(onChange).not.toHaveBeenCalled();
   });
 
@@ -64,7 +64,7 @@ describe('Pagination with jumper', () => {
     relatedTarget.className = 'rc-pagination-item';
     fireEvent.blur(input, { relatedTarget });
 
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue(null);
     expect(onChange).not.toHaveBeenCalled();
   });
 
@@ -271,3 +271,43 @@ describe('simple quick jumper', () => {
     ).toBeFalsy();
   });
 });
+
+describe('inputType number', () => {
+  it('should accept only number', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Pagination
+        onChange={onChange}
+        defaultCurrent={1}
+        total={95}
+        pageSize={10}
+        showQuickJumper={{ inputType: 'number' }}
+      />,
+    );
+    const quickJumper = container.querySelector(
+      '.rc-pagination-options-quick-jumper',
+    );
+    const input = quickJumper.querySelector('input');
+    fireEvent.change(input, { target: { value: '42' } });
+    expect(input.value).toBe('42');
+  });
+
+  it('should not accept non-number', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Pagination
+        onChange={onChange}
+        defaultCurrent={1}
+        total={95}
+        pageSize={10}
+        showQuickJumper={{ inputType: 'number' }}
+      />,
+    );
+    const quickJumper = container.querySelector(
+      '.rc-pagination-options-quick-jumper',
+    );
+    const input = quickJumper.querySelector('input');
+    fireEvent.change(input, { target: { value: 'abc' } });
+    expect(input.value).toBe('');
+  });
+});