I’m a UX/UI design student who is new to the field so please bare with me.
I want to create an interactive text input field for my prototype. I have a made an input field component with default and active variants. When the component is clicked on it switches to the active variants. What I can’t figure out is how to make it go back to the default variant when the user clicks outside of the component. Most of the answers I have seen online direct me to check off ‘reset component state’ under the ‘state management section’. That is not an option for my interaction, the only option I see is ‘reset scroll position’.
Interactions details shown in picture.
Any help would be greatly appreciated, thanks!