I cannot figure out why my active state isn’t working. I’ve set up three buttons, when clicked they should change to their active state, but they switch to the default state instead.
Everything is set up very basic. I have a component for the tabs, where the default has a simple while hovering change to Hover interaction. And I have a component for the menu bar with variants for each active tab with a simple on click change to variant interaction.
Am I doing anything wrong here?
Best answer by Haroll
Hi @Jeroen3
Everything fine, you just missed a step
On your list item component you have a trigger on the default state while hovering, so whenever your component is hovered, its background became light blue.
When you are on the frame with the “Label 1” selected, and you hover the label 2 item, it triggers its while hovering state. From a frame to an another, a component keep its state in memory, meaning that when you arrive on your second frame (the one with “Label 2” selected) the component is still being hovered, and its behavior when you move you cursor away is to get back to default state. That’s why the active state never show up.
— TLDR —
To overwrite this behavior your can click on the link defining your “On Click” and check the checkbox “Reset component state” (as shown below), so it will apply the style you want, regardless of its previous state and logic.
Hope it helped!
Hi @Jeroen3
Everything fine, you just missed a step
On your list item component you have a trigger on the default state while hovering, so whenever your component is hovered, its background became light blue.
When you are on the frame with the “Label 1” selected, and you hover the label 2 item, it triggers its while hovering state. From a frame to an another, a component keep its state in memory, meaning that when you arrive on your second frame (the one with “Label 2” selected) the component is still being hovered, and its behavior when you move you cursor away is to get back to default state. That’s why the active state never show up.
— TLDR —
To overwrite this behavior your can click on the link defining your “On Click” and check the checkbox “Reset component state” (as shown below), so it will apply the style you want, regardless of its previous state and logic.
Hope it helped!
That was indeed the issue. Thanks a lot
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.