Skip to main content

Been stuck with this bug for awhile and I’m not sure what I’m doing wrong. Probably better explained in the GIF below:


Screen Recording 2023-07-11 at 5.05.45 PM


Basically I have created menu items (variants for icon only + active states) to put on a menu list (variants for expanded and collapsed). The arrow button would swap the menu list variants.


Here’s the Figma file if anyone’s interested in taking a look. Thank you so much in advance!

Here’s my setup

image

I’ve been having the same issue. I followed tutorials like these:



But run into the same issue Andrew described: if there’s a hover state on the cell atom component, the segmented controller/toggle molecule component doesn’t work as expected, instead getting stuck in weird states with multiple cells being active.


It only works in the following states, neither desired:



  1. Remove hover states.

  2. Add a molecule component permutation for EVERY hover state.


I’m unable to upload the video, but here’s link to file: https://www.figma.com/file/2RhUlaOHI41oTbA6OCEwNC/Toggle-Test?type=design&node-id=0-1&mode=design&t=eohikBqvfg0yNiVr-11

@Andrew_Q_Tran, your problem is that your collapsed and expanded variants for the menu button are different. The collapsed variant should have the text layer from the expanded variant, but hidden.

@Eduardo_RH, your problem is different from the problem of the author of this topic. Your problem is that Figma preserve states. The solution is very simple—select all cell instances in the Toggle component variants, open the “on click” interaction details and check the “Reset component state” checkbox.

@tank666 I thought so too and have updated the linked Figma to include the hidden label. The problem still remains 😦


Screen Recording 2023-07-22 at 2.35.15 PM

However… I checked “Reset component state” per your recommendation to @Eduardo_RH above and it seems like it’s fixed!

Holy shit that worked, thanks @tank666 !!


Is there documentation for that anywhere? would love to learn when I need it for the future.

“Reset component state” should not have had an effect. What fixed your prototype was that you replaced the instances in the base component.


Previously, you used a component that was removed. That is, initially it’s used the wrong menu button component that exists in the file.

deleted-component

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings