Course lesson

Schedule Input Focus with requestAnimationFrame to Handle Multiple DOM Mutations in Zag.js

We'll be implementing the backspace event which triggers two actions: clearFocusedValue, and focusPreviousInput.

Duration
3 min
Access
Free
Transcript
Retained from source evidence

We'll be implementing the backspace event which triggers two actions: clearFocusedValue, and focusPreviousInput.

These implementations you'll be familiar with at this point but what you'll notice when we actually try to hit backspace that the focus value will get cleared but we won't be setting focus to the previous input. This is because there are several DOM mutations happening at the same time. We'll fix this by scheduling the focus of inputs to the next animation frame with requestAnimationFrame