Using a debounced search handler with antd select

Question

I am trying to create a wrapper component around antd's Select, that adds a debounced function to handle search input. I am using lodash's debounce util function.

However I run into a bug where:

• you type and pause to let the debounced function fire, the first time, this works fine.
• However when you then try adding keypresses to the search Text, the searchValue is not generated as expected.

I have created a minimal sandbox that replicates this behavior here: https://codesandbox.io/s/vigorous-glade-495f2z?file=/src/Select.jsx.

Answer 1

Remove the searchValue props from the Select component.

const propsToSelect = {
    ...props,
    style: { width: "300px" },
    onSearch: searchHandlerWithDebounce,
    filterOption: false,
    options: []
  };