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 ?