title: Ant Design - select - OnPopupScroll - React.js
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                                    &lt;Select
                                        showSearch
                                        filterOption={(input, option) =&gt; {
                                          if (option.props.children != undefined) {
                                            return (
                                              option.props.children.toLowerCase().indexOf(input.toLowerCase()) &gt;= 0
                                            )
                                          }
                                        }
                                        }
                                        name="user"
                                        placeholder="Select User"
                                        id="user"
                                        onChange={e =&gt;
                                          this.handleChange("user", e)
                                        }
                                        onPopupScroll = {this.loadMore}
                                        className="customSelectTemplate"
                                        disabled={this.state.editEnabled}
                                      &gt;
                                        &lt;Option value=""&gt;Select&lt;/Option&gt;
                                        {this.state.userList &amp;&amp;
                                          this.state.userList.map(userList =&gt; (
                                            userList &amp;&amp; userList.userNumber != null &amp;&amp;
                                            &lt;Option value={userList.userNumber}&gt;
                                              {userList.name}
                                            &lt;/Option&gt;
                                          ))}
                                          {this.state.loadingState == true ? 
                                          &lt;Option value=""&gt;Loading .....&lt;/Option&gt;
                                          : ""}
                                      &lt;/Select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>loadMore = ( e) =&gt; {
      this.setState({ loadingState: true });
      e.persist (); 
       const {target} = e; 
       if (target.scrollTop + target.offsetHeight === target.scrollHeight) { 
         // API call (to load more data..........)
      }
     
    }</code></pre>
  </div>
  </div>
  </p>