Model the Basic Events, Actions, and Transitions of a Pin Input Component
A pin input is a common UI pattern that has more state than you might initially think. We have a handful of use-cases to think through when modeling a state machine that will power a pin input. It should:
- Automatically focus the next field on typing and focuses the previous field on deletion.
- Support numeric and alphanumeric values.
- Support for copy/paste to autofill all fields.
We’ll break down the interactions and logic of a pin input component, detailing its state and transitions as well as talk through the actions that will be emitted when certain events are fired.
Instructor: [0:00] A pin input is a component that is commonly used to collect a verification token or OTP in an application. Here are the basic interactions in this component.
[0:11] With focus on the first input, typing a character sets the value of that field and moves focus to the next input. When all values have been filled, an event is emitted which auto-submits the completed value, just as you can see here in this demo.
[0:28] Now, let's see how we can take this logic and model this with a state machine.
[0:33] To model the PinInput component, we'll start by assuming that the pin input is in an Idle State. This basically means the input has been mounted on the page and has been uninteracted with.
[0:46] To use the pin input, the user needs to focus on a specific component. Let's assume that is also a Focus State. Based on that interaction, going from the idle state to the focus state requires a Focus Event, either by pressing the Tab key or clicking on a specific input.
[1:06] When you focus on an input and you click outside of that, just immediately or after typing some values, we call that Blur Event. Basically, it means it takes you from the focus state back to the idle state.
[1:19] Now we have a couple of intermediate events that needs to be done when we are focused on the input. One of those events is typing. It means that, when we are focused on the input and we type, one of the keywords we have here is Do. Do is a way to specify all the actions that should run when this event is sent.
[1:42] What we want to do here is to set the value of the input and also to focus on the next input.
[1:49] The other event we can send is Backspace. When Backspace is pressed, what we want to do is to clear the value and to focus the previous input, so type here, Focus Prev Input. Let's just call it Focus Prev.
[2:04] The last event we need to listen to here is the Paste Event. Here we are going to set the value and we are going to focus the last input to help here Focus Last.
[2:17] When all these interactions are happening, there are key pieces of information we need to keep track of, and I call those the data.
[2:24] The first piece of data we care about is the focused index, which of the input is focused. The second piece of data is the value, which is the value that has been typed into the input. This way, we have modeled the basic interactions that the PinInput components should have.
[2:41] Now let's see how we can model this in code.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!