Antd Select search functionality not working properly when using value prop : backspace key works only one character at a time

Viewed 16

I have a usecase to search for records using Antd Select. I am using debouncing to search only after 800 ms. The search functionality is working. I am passing defaultValue prop and value prop to the Select field to fetch the updated value from url of the webpage and display in search bar.

But after searching for first time, if I try to do backspace operation, I am only able to this one character at a time.

I have a workaround: If I remove the value prop, then the backspace functionality for search works after 800 ms i.e. proper debouncing.

Here is the code snippet for this:

const Search = () => {
  const { urlParameter = {}, updateUrlParameter } = usePage();

  const callUpdateUrlParameter = useCallback(updateUrlParameter, [
    urlParameter,
  ]);

  const debouncedCallback = debounce((value) => {
    if (value !== undefined) {
      callUpdateUrlParameter({
          search: value,
        });
    }
  }, 800);

  const handleSearch = (value) => {
    debouncedCallback(value);
  };

  return (
    <Input
      allowClear
      defaultValue={urlParameter["search"]}
      value={urlParameter["search"]}
      onChange={(e) => handleSearch(e.target.value)}
      placeholder={"Search By Name"}
    />
  );
};

I am able to solve the issue but do you know why removing value makes it working ? What is happening under the hood that defaultProp is okay, but value prop causes this type of behaviour ?

0 Answers
Related