Implement a State Machine Action for Setting Input Focus in Zag.js

InstructorSegun Adebayo

Share this video with your friends

Send Tweet

Now that we have a machine and our UI is sending it events, we need to actually do something with events that are sent. This is where actions come into play.

We'll implement focus and blur events for the input by setting the context focusedIndex to the index that is coming in from the UI. We can mutate context directly in Zag.js because it handles mutations through proxies to stay reactive.