Pagination's pageSizeOptions Select component's showSearch props handled dynamically.

README.md

@@ -64,6 +64,7 @@ ReactDOM.render(<Pagination />, container);
 | showSizeChanger              | show pageSize changer                                     | Bool                                                                                                                                                 | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise     |
 | totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number                                                                                                                                               | 50                                                                                     |
 | pageSizeOptions              | specify the sizeChanger selections                        | Array<String>                                                                                                                                        | ['10', '20', '50', '100']                                                              |
+| showSizeOptionsSearch        | show the pageSizeOptions Select component search          | Bool                                                                                                                                                 | Default value is `false`. `false` when pageSizeOptions Select component disabled the showSearch, `true` when pageSizeOptions Select component enabled the showSearch     |
 | onShowSizeChange             | pageSize change callback                                  | Function(current, size)                                                                                                                              | -                                                                                      |
 | hideOnSinglePage             | hide on single page                                       | Bool                                                                                                                                                 | false                                                                                  |
 | showPrevNextJumpers          | show jump-prev, jump-next                                 | Bool                                                                                                                                                 | true                                                                                   |

docs/examples/jumper.tsx

@@ -50,6 +50,7 @@ const App = () => (
       total={8}
     />
     <br />
+    <h3>Page options showSizeOptionsSearch is enabled</h3>
     <Pagination
       selectComponentClass={Select}
       showQuickJumper
@@ -58,6 +59,7 @@ const App = () => (
       onChange={onChange}
       pageSize={10}
       total={8}
+      showSizeOptionsSearch={true}
     />
   </>
 );

src/Options.tsx

@@ -25,6 +25,7 @@ interface OptionsProps {
   selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
     Option?: React.ComponentType<Partial<OptionProps>>;
   };
+  showSizeOptionsSearch?: boolean;
 }
 
 const defaultPageSizeOptions = ['10', '20', '50', '100'];
@@ -42,6 +43,7 @@ const Options: React.FC<OptionsProps> = (props) => {
     selectPrefixCls,
     disabled,
     buildOptionText,
+    showSizeOptionsSearch
   } = props;
 
   const [goInputText, setGoInputText] = React.useState('');
@@ -128,7 +130,7 @@ const Options: React.FC<OptionsProps> = (props) => {
       <Select
         disabled={disabled}
         prefixCls={selectPrefixCls}
-        showSearch={false}
+        showSearch={showSizeOptionsSearch}
         className={`${prefixCls}-size-changer`}
         optionLabelProp="children"
         popupMatchSelectWidth={false}

src/Pagination.tsx

@@ -64,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showTotal,
     showSizeChanger: showSizeChangerProp,
     pageSizeOptions,
+    showSizeOptionsSearch = false,
 
     // render
     itemRender = defaultItemRender,
@@ -582,6 +583,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         pageSizeOptions={pageSizeOptions}
         quickGo={shouldDisplayQuickJumper ? handleChange : null}
         goButton={gotoButton}
+        showSizeOptionsSearch={showSizeOptionsSearch}
       />
     </ul>
   );

src/interface.ts

@@ -38,6 +38,7 @@ export interface PaginationData {
   showTitle: boolean;
   simple: boolean;
   disabled: boolean;
+  showSizeOptionsSearch: boolean;
 
   locale: PaginationLocale;