I have tried to rethink the way this interaction is supposed to happen, and spent the better part of my day last Friday trying to figure it out, even though I have built similar interactions a million times before. I might be doing something wrong, but I am becoming more and more certain that this is a bug.
The video below shows the individual button component that makes up the sections of the segmented button below. You will see that the interaction on the button is as follows:
- Default state changes to hover state on while hovering
- Hover state changes to pressed state on while pressing
- Hover state changes to active state on on click (this works better than trying to do on click for the pressed state)
Then I have a simple component set of 5 variants where clicking on one option should toggle the view to the next, but instead, you can see what happens.
The nested component SHOULD remain active after pressing, and yet it goes back to default. If this is not a bug, I would love to learn how to fix this and why it’s changes (this has worked in past for me before!)
Thanks.
