is there a way to debounce holding a key (in React if it changes anything, I am aware that I need to wrap debounce in useCallback)?
I have a few selects, each of them sends request. There's a default possibility to hold tab to go through selects, so there are too many requests being sent.
Can I set debounce on holding tab key? Also I'd prefer a solution which doesn't affect a11y.
Thanks in advance!
I managed to hold the fetch by waiting a while, then checking if my select is the current document select, then fire the fetch or not
const sleep = (milliseconds = 500) => new Promise(resolve => setTimeout(resolve, milliseconds));
const handleFocus = async () => {
await sleep();
if (selectRef.current === document.activeElement) {
if (!listShowed) {
showList(true);
document.addEventListener('click', hideList);
}
fetch();
}
};
But needed to add ref. Not sure if it's the most optimal solution, but it works. If I change selected item rapidly, then after sleep() the selectRef.current !=== document.activeElement, so it won't fire