Hey everyone, I just spent way too long figuring out how to solve a (in the end pretty simple
) bug so I thought I’d share it there, in case that ever happens to someone else.
I was facing a bug in responsive mode (tablet & mobile) with the native Tabs element from Weweb. I had 2 states : hover & active. But in mobile mode, users had to click twice in order to make the tabs switch. The 1st click was triggering the hover mode, then the 2nd one the active state. Really not ideal in terms of smoothness for the user.
In the end it was actually just a simple fix to avoid that.
To ensure that the active state of a native tab remains prioritized over the hover state in WeWeb, you need to organize the order of states in the styles panel. Place the hover state above the active state in the list of states (you can do this by dragging and dropping with the hamburger icon). This way, the active state will not be overwritten by the hover, and a single click will be enough to select a tab, even on mobile.
Check this order in the style editor for each tab concerned. This setting fixes the double-click issue related to state priority.
And if you have set you states to apply to children, you need to make sure that the order of those states are also set like that for your child elements.
Also, it felt like having too much stuff in the header of you tabs (like 2 icons instead of one for instance) was keeping the problem from getting solved.
Anyway, I hope this might help you if you read this. Happy building to you ![]()