Component Variant Update at Interaction working funny

[frao_bao]

Hi there, I’m working on a little component intended for use in a portfolio case study page. The component is a text ‘Outline’ label, that, ideally, at click reveals the full index list of the page chapters, and at click again, it closes the list and goes back to default.

I set up the component as a default state and a Variant labelled ‘Outline Open’. In the ‘Outline’ label element, I set an Interaction to be triggered At click, that Updates the Variant to the ‘Outline Open’ variant.

Since I want an icon change on the ‘Outline’ label, I duplicated it to have “Outline 1” and “Outline 2”, and set it so that in Default “Outline 1” is visible and “Outline 2” is hidden, while the opposite happens in Outline Open variant. Then in the ‘Outline 2’ label element, I set an Interaction to be triggered At click, that Updates the Variant again, to go back to Default.

The problem is that when I test it and click “Outline 1”, the Variant is updated, but then everything disappears. This happens both in the individual component page, and when I apply the component to a specific case study page.

Please find attached a few images and a short clip of the problem.

Any help on this one?

Thanks a lot in advance

[fmota]

Hi, the issue seems to happen because the title element is actually a link element. So when the element is clicked the action to update the variant is triggered, but a navigation is also triggered which makes the behavior to feel funky. I recommend you to check the issues tab in the left pane to check for invalid nesting of links as this can avoid some future hydration errors.