<Select
showSearch
filterOption={(input, option) => {
if (option.props.children != undefined) {
return (
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
}
}
}
name="user"
placeholder="Select User"
id="user"
onChange={e =>
this.handleChange("user", e)
}
onPopupScroll = {this.loadMore}
className="customSelectTemplate"
disabled={this.state.editEnabled}
>
<Option value="">Select</Option>
{this.state.userList &&
this.state.userList.map(userList => (
userList && userList.userNumber != null &&
<Option value={userList.userNumber}>
{userList.name}
</Option>
))}
{this.state.loadingState == true ?
<Option value="">Loading .....</Option>
: ""}
</Select>
I have designed a page using react. I need to implement infinite scrolling in an ant dropdown. So I am using the onPopupScroll function of antd select to call API to load more data to the dropdown. But i am facing performance issue in the dropdown. The scrollbar is not working properly. I cant able to drag the scrollbar to the end of the options. It is very slow. Has someone faced this issues? How can I fix this?
loadMore = ( e) => {
this.setState({ loadingState: true });
e.persist ();
const {target} = e;
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
// API call (to load more data..........)
}
}