Just struck a pretty simple use case/scenario where I need the component to reset it’s state when I leave the frame. This has been touched on elsewhere, but this is such a common and key use that I thought I’d put it in it’s own thread.
I’ve got a dropdown menu with three items in it, with each item changing what columns are visible in a table and some other control states. I have three frames, each with a view of the table setup as it should be, and want to use the dropdown items to navigate between the frames - basically faking the table state change. All of this works perfectly, however when I navigate back to a previous table view state, the dropdown component is already in it’s open state - not what I want.
Current workaround: none that I can come up with (other than not using interactive components at all for this, and just using multiple frames for the dropdown open/closed states as I would previously)
- Have a “reset component on leaving this frame” setting for instances of a component on a frame - useful for this situation and others, but needs to be a setting so that components that should keep their state between frames can do so (light/dark toggle maybe? Something like that).
- Do it all in a single frame, with the dropdown component changing the the state of the table component - no frame navigation required. Would work nicely for the particular use case I’m working with here, but not sure it would solve all similar situations.
- Do both 1 and 2. This solution is my preferred solution
Other threads that relate:
Right now, I don’t think you can do it natively. The workaround I use is to open in overlay the components you want to reset. Since an overlay is destroyed and created each time, it will reset your interactive component. The main limitation to this, since you can only have one overlay at a time, is that you cannot use other overlays. At least this is a workaround.
This is so annoying…
@Nicolas_Demange workaround doesn’t work in my case for multiple reasons:
- I don’t want to let the user get in that state using arrow keys;
- I cannot use it with After Delay, even if I close the overlay before everything finish.
Can we get an official response about how we can reset the state of the interactive component to the initial or desired one?
I’m sad to say, I’ve had to fall back to disconnecting all the component interactions, and then creating individual screen-level frames (screen x dropdown open, screen x dropdown closed) and all the combinatorial spaghetti that goes with that Hopefully we’ll hear something about the issue soon.
I’ve just run into this as well and it’s a pretty giant limitation I didn’t expect. Tough problem to solve, hope they have something for it soon.
But basically I can’t use interactive components in about half the cases I’d expect to be able to at this point.
Yes, at this point I’m only using IC for simple, non-nested hover states
I definitely hope this gets addressed (or at least acknowledged) during the beta. I’m able to use the overlay hack mentioned above in some, but not all cases.
Would something like this solve the issue?
Something like this, yes But I think it belongs on the prototype tab of the sidebar, so that it’s alongside all the other prototyping settings for the component.
Related but opposite, yes I think the threads are convergent in outlook, so happy for a mod to merge them if that makes sense. Saying that, they are linked at the head post already though.
may be add “default” state for comp. Reset to default state after: change page, delay time and ect.
My case: navigation. in 1 page i can change active state (swap comp) by click. for example tab menu. After move to next page and back - comp “remember” last state/last swap. I want to reset state if i move to this page.
Sorry, don’t quite get that. For example, if you have a tab menu with three states, wouldn’t you have three comps (frames), one for each state, with the tab menu having a different active tab in each? I feel like in that case you wouldn’t want or need to reset the navigation “default” state for each frame, but maybe I’m missing something here…
I think the workaround is to create a frame in the size of the whole drop-down above all of the layers in dropdown, then make the opacity to 0 and give it an action of mouse leave= Close, the buttons will work perfectly under it and if the mouse be not in the area the drop-down closes natively, and remember for a state remembrance you just have to have 2,3,4,… closed DRP with different names of your DRP options and after adding it to your default frame in the interactive C choose which one to play.
If you give an example of what you did, maybe I can assist you more, I have dozen of dropdowns in my design and they all work perfectly, but remember if you want dropdowns to have actions like table change, the only way added to the above is to create a frame with each table and drop-downs actions above them as interactive components, this gives a nice DRP and actions but it will hunt your RAM, a small price to pay for perfection if you run on a good PC
Yes, this issue is making me drop interactive components too.
I think this is the right path, but not as a dropdown because more than one state may be available.
In the Design tab, within the component panel, there should be a checkbox to “Always load with these states”. Every time you revisit that instance, it will load with the states specified.
You’re right, there would need to be the ability to set any/all properties associated with that component - for that reason, I don’t think a checkbox would work either; there would be no easy way to go back to and tweak the initial settings. Maybe a popout copy of the properties panel (akin to the colour panel for example) where you set the initial value of each property?
Would be very useful to be able to set/change property states based on a trigger (ex: load screen).
Hi guys, what I did - and worked (not perfectly, but it did got the effect I wanted) is to put the option “mouse leave” on the open component linking to the closed one.
Another suggestion to Figma devs would be to be able to make two results with the same action. Ex: on click > nav to x page AND change component to Y