I have a component with search input, which displays the records' Names matched with the search keyword. I am using lightning-input type="search"
with onchange
method to change the property searchKey
, and there is a wired apex method where I am passing this value. This is working fine.
But the problem is that every time user enters the key wired apex method is getting called. This is a very bad experience for the user and also it will make so many apex calls. To overcome this I tried adding the typing delay using the setTimeout
method (keyboard debouncing). The setTimeout()
is getting called and also it is setting the new value to the searchKey
. But the wired method is not getting called.
Here is my code snippet.
JS
doneTypingInterval = 300;
searchKey = '';
@wire(fetchRecords, { searchKey: "$searchKey" })
wiredRecords(result) {
// ...
}
// ...
handleSearchCriteriaChange(event) {
clearTimeout(this.typingTimer);
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.typingTimer = setTimeout(() => {
this.searchKey = event.detail.value;
console.log("value ", this.searchKey); // value is getting updated here.
}, this.doneTypingInterval);
}
PS: I also tried the arrow function with setTimeout, not working as well. Same thing I have done with another component in the same org that is working. I have also changed the version of this component to match with others, still not working.
Please note that I am not running into any errors, also I have checked the debug logs on both the client-side and server-side. I don't see any error on browser console, and no logs at all in salesforce(I am sure the call is not being made to apex.).
async handleSearchCriteriaChange(event)
?async
keyword did not help.