Implement a State Machine Action for Setting Input Focus in Zag.js
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.
Instructor: [0:01] When the input is focused, we are sending the focus event passing in the index. When the input is blurred, we are also sending the blur event.
[0:11] One of the things you will notice here in the machine is we basically just put in the actions as a string. The question that comes to mind is what happens to the implementation of these strings. Well, that's exactly what we want to do right now.
[0:25] Here, we put in a string representation of the implementation and now, we are going to undo the implementation for focus and the blur events.
[0:34] The create machine function allows us to pass in a second argument for the actions. Here is where we implement the actions for all the different string values that we entered earlier. In the idle state, when the focus event is sent, the key action here is to set the focused index.
[0:55] Remember that when in here in the app, we pass in the event structure. In send, this object right here represents the event. The event has a type of focus and the index is a number. If we come here within the machine and we try to implement set focus index, this gives us access to two arguments, the context and the event.
[1:18] Context represents the current context for the machine, which is value and focus index. Event represents the event object that was put in a descent area here. To implement this, what we do is we set the context.focus index to match the event.index. The context represents the current data that is within our machine and that data is mutable.
[1:46] Sargent uses proxies and has deep built in reactivity within it. Here we are basically just setting the focus index to whatever index that is passed in from the event and that's it. Next, when the blur event is sent in the focus state, we have clear focus index. We are going to take that string in there and then come here and just implement that. We have the context and the event again.
[2:13] Here, we are basically just resetting it back to minus one. That means we don't really need the event from here. Now, this is all that is required to get the focus and the blur working correctly. Let's verify that it works. When we refresh the page, we have here the state, the event, the context. When I focus on that, you can see the event gets sent with the index of zero.
[2:39] That is automatically reflected in the machine with the focus index of zero. If I focus on this one, it goes to one, it goes to two. If I just blur out of the page, you see that it resets back to -1.