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