fix: Pagination sizeOptions search handeled by showSizeOptionsSearch prop

Author: EnigamaE

README.md

@@ -65,6 +65,7 @@ ReactDOM.render(<Pagination />, container);
 | totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number                                                                                                                                               | 50                                                                                     |
 | pageSizeOptions              | specify the sizeChanger selections                        | Array<String>                                                                                                                                        | ['10', '20', '50', '100']                                                              |
 | onShowSizeChange             | pageSize change callback                                  | Function(current, size)                                                                                                                              | -                                                                                      |
+| showSizeOptionsSearch        | when true can search in sizeChanger select                | Bool                                                                                                                                                 | false                                                                                  |
 | hideOnSinglePage             | hide on single page                                       | Bool                                                                                                                                                 | false                                                                                  |
 | showPrevNextJumpers          | show jump-prev, jump-next                                 | Bool                                                                                                                                                 | true                                                                                   |
 | showQuickJumper              | show quick goto jumper                                    | Bool / Object                                                                                                                                        | false / {goButton: true}                                                               |

docs/examples/sizer.tsx

@@ -38,6 +38,7 @@ class App extends React.Component {
           selectComponentClass={Select}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
+          showSizeOptionsSearch={true}
           defaultCurrent={3}
           total={60}
         />

src/Options.tsx

@@ -18,6 +18,7 @@ interface OptionsProps {
   selectPrefixCls?: string;
   pageSize: number;
   pageSizeOptions?: (string | number)[];
+  showSearch?: boolean;
   goButton?: boolean | string;
   changeSize?: (size: number) => void;
   quickGo?: (value: number) => void;
@@ -39,6 +40,7 @@ const Options: React.FC<OptionsProps> = (props) => {
     quickGo,
     rootPrefixCls,
     selectComponentClass: Select,
+    showSearch,
     selectPrefixCls,
     disabled,
     buildOptionText,
@@ -128,7 +130,7 @@ const Options: React.FC<OptionsProps> = (props) => {
       <Select
         disabled={disabled}
         prefixCls={selectPrefixCls}
-        showSearch={false}
+        showSearch={showSearch}
         className={`${prefixCls}-size-changer`}
         optionLabelProp="children"
         popupMatchSelectWidth={false}

src/Pagination.tsx

@@ -56,6 +56,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showLessItems,
     showTitle = true,
     onShowSizeChange = noop,
+    showSizeOptionsSearch,
     locale = zhCN,
     style,
     totalBoundaryShowSizeChanger = 50,
@@ -576,6 +577,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         rootPrefixCls={prefixCls}
         disabled={disabled}
         selectComponentClass={selectComponentClass}
+        showSearch={showSizeOptionsSearch}
         selectPrefixCls={selectPrefixCls}
         changeSize={showSizeChanger ? changePageSize : null}
         pageSize={pageSize}

src/interface.ts

@@ -32,6 +32,7 @@ export interface PaginationData {
 
   hideOnSinglePage: boolean;
   showSizeChanger: boolean;
+  showSizeOptionsSearch?: boolean;
   showLessItems: boolean;
   showPrevNextJumpers: boolean;
   showQuickJumper: boolean | object;

tests/sizer.test.tsx

@@ -68,6 +68,21 @@ describe('Pagination with sizer', () => {
     expect(onChange).toHaveBeenLastCalledWith(1, 10);
   });
 
+  it('should has search ability in pageSizeOptions select', () => {
+    const { container } = render(
+      <Pagination
+        total={500}
+        pageSize={15}
+        showSizeChanger
+        showSizeOptionsSearch
+        selectComponentClass={Select}
+      />,
+    );
+    expect(container.querySelectorAll('.rc-select-show-search')).toHaveLength(
+      1,
+    );
+  });
+
   // https://github.com/ant-design/ant-design/issues/26580
   it('should contains locale text in selected pageSize when pageSizeOptions are numbers', () => {
     const { container } = render(