feat: support custom quick-jumper input

src/Options.tsx

@@ -2,7 +2,7 @@ import type { SelectProps } from 'rc-select';
 import type { OptionProps } from 'rc-select/es/Option';
 import KEYCODE from 'rc-util/lib/KeyCode';
 import React from 'react';
-import type { PaginationLocale } from './interface';
+import type { PaginationLocale, PaginationData } from './interface';
 
 interface InternalSelectProps extends SelectProps {
   /**
@@ -11,7 +11,7 @@ interface InternalSelectProps extends SelectProps {
   popupMatchSelectWidth?: boolean;
 }
 
-interface OptionsProps {
+interface OptionsProps extends Pick<PaginationData, 'inputComponentClass'> {
   disabled?: boolean;
   locale: PaginationLocale;
   rootPrefixCls: string;
@@ -39,8 +39,9 @@ const Options: React.FC<OptionsProps> = (props) => {
     quickGo,
     rootPrefixCls,
     selectComponentClass: Select,
+    inputComponentClass: Input = 'input',
     selectPrefixCls,
-    disabled,
+    disabled = false,
     buildOptionText,
   } = props;
 
@@ -166,7 +167,7 @@ const Options: React.FC<OptionsProps> = (props) => {
     goInput = (
       <div className={`${prefixCls}-quick-jumper`}>
         {locale.jump_to}
-        <input
+        <Input
           disabled={disabled}
           type="text"
           value={goInputText}

src/Pagination.tsx

@@ -40,6 +40,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     selectPrefixCls = 'rc-select',
     className,
     selectComponentClass,
+    inputComponentClass,
 
     // control
     current: currentProp,
@@ -585,6 +586,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         rootPrefixCls={prefixCls}
         disabled={disabled}
         selectComponentClass={selectComponentClass}
+        inputComponentClass={inputComponentClass}
         selectPrefixCls={selectPrefixCls}
         changeSize={showSizeChanger ? changePageSize : null}
         pageSize={pageSize}

src/interface.ts

@@ -37,14 +37,18 @@ export interface PaginationData {
   showPrevNextJumpers: boolean;
   showQuickJumper: boolean | object;
   showTitle: boolean;
-  simple: boolean | { readOnly?: boolean; };
+  simple: boolean | { readOnly?: boolean };
   disabled: boolean;
 
   locale: PaginationLocale;
 
   style: React.CSSProperties;
 
   selectComponentClass: React.ComponentType;
+  /**
+   * @since 4.3.0
+   */
+  inputComponentClass?: React.ComponentType<React.InputHTMLAttributes<any>>;
   prevIcon: React.ComponentType | React.ReactNode;
   nextIcon: React.ComponentType | React.ReactNode;
   jumpPrevIcon: React.ComponentType | React.ReactNode;

tests/index.test.tsx

@@ -356,6 +356,56 @@ describe('Other props', () => {
       container.querySelector('.rc-pagination-options-quick-jumper-button'),
     ).toBeDisabled();
   });
+
+  it('should support inputComponentClass', () => {
+    const Input = jest.fn((props) => (
+      <input {...props} data-testid="custom-input" />
+    ));
+    const { getByTestId } = render(
+      <Pagination
+        showQuickJumper
+        inputComponentClass={Input}
+        defaultPageSize={20}
+        defaultCurrent={5}
+        total={450}
+      />,
+    );
+    const inputDom = getByTestId('custom-input');
+    expect(inputDom).toBeTruthy();
+
+    // expect params
+    expect(Input).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        'aria-label': expect.any(String),
+        disabled: expect.anything(),
+        onBlur: expect.any(Function),
+        onChange: expect.any(Function),
+        onKeyUp: expect.any(Function),
+        type: 'text',
+        value: expect.any(String),
+      }),
+      expect.anything(),
+    );
+
+    // input change value
+    fireEvent.change(inputDom, { target: { value: '2' } });
+    expect(inputDom).toHaveValue('2');
+    expect(Input).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        value: '2',
+      }),
+      expect.anything(),
+    );
+
+    // input blur
+    fireEvent.blur(inputDom);
+    expect(Input).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        value: '',
+      }),
+      expect.anything(),
+    );
+  });
 });
 
 // https://github.com/ant-design/ant-design/issues/10524