Spread Values Across a Pin Input Field in a Zag.js State Machine
The paste event is a unique input event that we need to handle. When we paste a value in from the clipboard, we need to split that value and input single characters to the individual inputs in our Pin Input.
To do this we will need to preventDefault in the onPaste event so that we can implement our custom logic here. Next we'll implement setPastedValue that splits and iterates over the input value we receive and sets it into context.
Finally we'll implement focusLastEmptyInput that looks up the index of the first empty value with findIndex and focuses that index.
[0:01] Now, we are going to undo the paste event. Before we do that, if we switch over here to the input element in the unpaste event, one of the key things we want to do when the paste event is triggered is to spread the value that has been pasted across all the different inputs.
[0:19] This means we would need to prevent the default browser behavior from happening so that our custom logic can actually take effect. Another quality of life improvement we can add here is to trim the values just to make sure it's compact and removes all the spaces.
[0:39] Now, if we switch over here and in the actions for the paste event, we've got set pasted value and focus last empty input. Let's implement those. Let's start with the set pasted value. We take the context and the event. In here, we create a variable for the pasted value.
[0:59] Cast that to a string array. We grab here the event.value. Because we know that's a string, we can split that into an array. Then make sure that we actually slice the value so it doesn't exceed the number of inputs we have.
[1:17] The number of inputs we have matches the context.value.length, which is four in this case. Then we're simply going to loop over the pasted value within A4H. We grab the value and the index, and we basically just set that into the context. There we go. We have been able to take the pasted value and just apply that to the context and set the value there.
[1:49] Now again for the pasted value, the second one is to focus the last empty input. To implement this, we would come in here again and grab the focus last empty input. Grab the context. In here, we're going to compute the index we need to focus on.
[2:12] Now the index we need to focus on comes from the context value. We're going to try to find the index where the value is actually empty. Now once we have that input, we're basically just going to set that into the context like so.
[2:30] Now to ensure this works, let's check out the UI. If I copy this string of text, ENT and focus on this input and just paste the value, we see right away that ENT gets filled up and then we find out the last input gets populated. This is exactly the behavior that we expect.
[2:54] One improvement we can make to this action here is the fact that the return index or find index here may return -1. Let's prevent that from happening. When the index returns -1, this means that every value in the input is filled. In this scenario, it may make sense to just focus on the last input itself.
[3:17] Here we can create a variable for the last index and that matches the context.value.length -1 and here, we can ask the question if the index is -1 we'd use the last index. Otherwise, we can stick to the index itself. This way, we prevent any overflow from happening.