I'd like to highlight EMAIL TextField as invalid not immediately but after 5 seconds user starts to type in. So user types then stops then after 5 seconds validate the field and mark as invalid if error. I'm trying to use debouncing function but seems it's not working with TextField error property. Is it the good approach?
const [email, setEmail] = useState('');
export const emailHasError = (email) => {
....
return true; // if error
}
<TextField
id="filled-basic"
label="email"
variant="filled"
fullWidth
error={email.length > 0 && debounce(emailHasError(email), 3000)}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
In your method, debounce will not return the value which you are returning from the inner function. debounce will return a timer so it will always true
I have added one more state to store the invalid value. and using the same debounce function onkeyUp.
const [email, setEmail] = useState('');
const [invalidEmail, setInvalidEmail] = useState(false)
export const emailHasError = (email) => {
....
setInvalidEmail(true) // if error
}
const checkEmail = () => {
setInvalidEmail(false);
debounce(emailHasError(email), 3000)
}
<TextField
id="filled-basic"
label="email"
variant="filled"
fullWidth
error={invalidEmail}
value={email}
onKeyUp={checkEmail}
onChange={(e) => setEmail(e.target.value)}
/>