Border in auto layout above neighboring items?

Huh, this is interesting. I would imagine implementing some sort of “stack order” – a parallel to z-index in CSS would be possible.

Facing same issue

Anyone has any workarounds to this? I am having the same issue

Does bringing the selected component to the front resolve the issue?

There is indeed a workaround but it will only work if you are not changing the fill color during interactions.

Check this: How can I do a shadow effects while hovering on consecutive buttons - #2 by Raphael_M

If you have other questions, let me know.

Thanks.

Not really, I need to have auto layout activated. If I bring the layer to the top it will move left/right but I need it to be at the center.

It works, thanks! Just that my design system is using drop shadow with transparency for the typing state, so I can still see the grey border of the next input field.

I’ll need to consider if I should amend the fill color of all the text fields in my variants to standardize it in the design system and do an edge case on the drop shadow in this use case by removing transparency and use solid color instead.