Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot disable filtering for pagination page size input field #48996

Closed
Jeidoz opened this issue May 20, 2024 · 1 comment
Closed

Cannot disable filtering for pagination page size input field #48996

Jeidoz opened this issue May 20, 2024 · 1 comment

Comments

@Jeidoz
Copy link

Jeidoz commented May 20, 2024

Reproduction link

https://ant.design/~demos/components-pagination-demo-more

Steps to reproduce

Click on page-size combo box

What is expected?

Readonly select behavior like in 4.x without text filtering, blinking cursor and etc.

What is actually happening?

Input field became focused and allows text filtering for predefined sizes.

Environment Info
antd 5.15.1
React React ^16
System Windows 11 (23H2 - 22631.3527)
Browser Microsoft Edge for Business Version 125.0.2535.51 (Official build) (64-bit)

Please, provide API ability to disable filtering and keep single-tap combo box / select behavior.
Looks like "readonly" is missing in 5.x. and it cause such behavior.

4.x input tag:
<input type="search" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_2_list" aria-autocomplete="list" aria-controls="rc_select_2_list" aria-activedescendant="rc_select_2_list_0" aria-label="Page Size" readonly unselectable="on" value="" style="opacity: 0;" id="rc_select_2">

5.x input tag:
<input type="search" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_0_list" aria-autocomplete="list" aria-controls="rc_select_0_list" aria-label="Page Size" value="" id="rc_select_0">

@Jeidoz
Copy link
Author

Jeidoz commented May 21, 2024

Change please it from Bug to "Nice to have" or "Feature Request" please.

That "search" feature can be disabled by removing showSearch in Antd <Select>. (it is enabled by default in MiniSelect component).

To do this, we need to create custom selector:

import React from 'react'
import type { SelectProps } from 'antd/lib/select'
import Select from 'antd/lib/select'

type CompoundedComponent = React.FC<SelectProps> & {
  Option: typeof Select.Option
}

const SelectWithoutSearch: CompoundedComponent = (props) => <Select {...props} size="small" />
SelectWithoutSearch.Option = Select.Option

// Make sure to export your custom select component
export { SelectWithoutSearch }

And pass it into selectComponentClass Antd <Pagination>:

<AntdPagination {...pagination} selectComponentClass={SelectWithoutSearch} ...>

@Jeidoz Jeidoz closed this as completed May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant