fix: restrict input to numeric characters only in QuickJumper and simple mode

Author: cheeseburgertony

src/Options.tsx

@@ -60,7 +60,16 @@ const Options: React.FC<OptionsProps> = (props) => {
       : (value: string | number) => `${value} ${locale.items_per_page}`;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGoInputText(e.target.value);
+    let value = e.target.value;
+
+    // Filter non-numeric characters for QuickJumper input
+    const numericValue = value.replace(/\D/g, '');
+    if (numericValue !== value) {
+      e.target.value = numericValue;
+      value = numericValue;
+    }
+
+    setGoInputText(value);
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {

src/Pagination.tsx

@@ -145,6 +145,17 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     return value;
   }
 
+  function getValidValueForFiltered(
+    originalValue: string,
+    filteredValue: string,
+  ): number {
+    // If the input was completely filtered out (non-numeric), return current value
+    if (filteredValue === '' && originalValue !== '') {
+      return internalInputVal;
+    }
+    return getValidValue({ target: { value: filteredValue } });
+  }
+
   function isValid(page: number) {
     return isInteger(page) && page !== current && isInteger(total) && total > 0;
   }
@@ -166,7 +177,16 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       | React.KeyboardEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLInputElement>,
   ) {
-    const value = getValidValue(event);
+    const inputElement = event.target as HTMLInputElement;
+    const originalValue = inputElement.value;
+
+    // Filter non-numeric characters for simple mode input
+    const numericValue = originalValue.replace(/\D/g, '');
+    if (numericValue !== originalValue) {
+      inputElement.value = numericValue;
+    }
+
+    const value = getValidValueForFiltered(originalValue, numericValue);
     if (value !== internalInputVal) {
       setInternalInputVal(value);
     }

tests/jumper.test.tsx

@@ -270,4 +270,87 @@ describe('simple quick jumper', () => {
       ),
     ).toBeFalsy();
   });
+
+  // https://github.com/ant-design/ant-design/issues/55637
+  describe('QuickJumper should only accept numeric input', () => {
+    it('should filter non-numeric characters in QuickJumper input', () => {
+      const { container } = render(<Pagination total={100} showQuickJumper />);
+
+      const input = container.querySelector(
+        '.rc-pagination-options-quick-jumper input',
+      ) as HTMLInputElement;
+
+      // Test typing letters with numbers
+      fireEvent.change(input, { target: { value: 'abc123def' } });
+      expect(input.value).toBe('123');
+
+      // Test decimal point (should be filtered)
+      fireEvent.change(input, { target: { value: '12.34' } });
+      expect(input.value).toBe('1234');
+
+      // Test only letters
+      fireEvent.change(input, { target: { value: 'test' } });
+      expect(input.value).toBe('');
+
+      // Test special characters
+      fireEvent.change(input, { target: { value: '!@#$%' } });
+      expect(input.value).toBe('');
+    });
+
+    it('should filter non-numeric characters in simple mode', () => {
+      const { container } = render(<Pagination simple total={100} />);
+
+      const input = container.querySelector(
+        '.rc-pagination-simple-pager input',
+      ) as HTMLInputElement;
+
+      // Test typing letters with numbers
+      fireEvent.change(input, { target: { value: 'test5page' } });
+      expect(input.value).toBe('5');
+
+      // Test special characters with numbers
+      fireEvent.change(input, { target: { value: '3@#' } });
+      expect(input.value).toBe('3');
+    });
+
+    it('should handle paste with non-numeric content', () => {
+      const { container } = render(<Pagination total={100} showQuickJumper />);
+
+      const input = container.querySelector(
+        '.rc-pagination-options-quick-jumper input',
+      ) as HTMLInputElement;
+
+      // Simulate paste with mixed content
+      fireEvent.change(input, { target: { value: 'page 42!' } });
+      expect(input.value).toBe('42');
+
+      // Simulate paste with only text
+      fireEvent.change(input, { target: { value: 'goto page' } });
+      expect(input.value).toBe('');
+    });
+
+    it('should work correctly with Enter key after filtering', () => {
+      const onChangeFn = jest.fn();
+      const { container } = render(
+        <Pagination
+          onChange={onChangeFn}
+          defaultCurrent={1}
+          total={100}
+          showQuickJumper
+        />,
+      );
+
+      const input = container.querySelector(
+        '.rc-pagination-options-quick-jumper input',
+      ) as HTMLInputElement;
+
+      // Type numeric value with letters
+      fireEvent.change(input, { target: { value: 'abc5xyz' } });
+      expect(input.value).toBe('5');
+
+      // Press enter
+      fireEvent.keyUp(input, { key: 'Enter', keyCode: 13, which: 13 });
+      expect(onChangeFn).toHaveBeenCalledWith(5, 10);
+    });
+  });
 });