I have a component with 4 variants - sort of like a dialogue representing a Wizard flow: It goes back and forth through variants by using “Previous” and “Next” buttons.
The problem is, the component “remembers” at which variant it is. By default, it starts at variant 1 (default). Then I go through it, it ends at variant 4. However, next time I call up the instance of this component (as an overlay), It is still on step 4, where it was when the overlay was closed when it was first used.
Is there any way to have a component rewind to a default variant after it is closed?
I need a little more context. What does the user do to enter the flow the first time, and in what context would they need the flow to restart after completing it?
Sure:
The component “Wizard” is a 4-variant dialog box, with each variant having Previous and Next buttons. They are wired so that Prev goes one variant back, and Next goes one variant forward. They don’t roll around - Prev on the first variant is disabled, and Next on the last variant is labeled “Done” and closes the overlay.
When user clicks the “Start Wizard” button in the UI, it invokes the “Wizard” instance as an overlay in the center of the screen. I can go through the 4 steps (variants), until I reach the last step and select “Done”, which closes the “Wizard”
Now, if I click the “Start Wizard” button in the UI again, the “Wizard” instance overlay is on step 4. I need it to be “rewound” back to Step 1 (Default Variant) Each time its instance is invoked.
I have a prototype working [here], and I can share my project setup.(https://www.figma.com/proto/GCGEP8DYL06vk5U5oYmrbg/One-Land.fig..fig.?node-id=5122-172171&scaling=min-zoom&page-id=4979%3A20191&starting-point-node-id=5122%3A172171&show-proto-sidebar=1)
Any thoughts on this? Anyone? Basically, the ask is, anytime an instance of a multi-variant component is invoked, it SHOULD be set to its DEFAULT variant.
Posting for other people finding this post. At the first interaction, you can check the ‘Reset Component State’ checkbox. Example in the image below:
