Outer div shifts slightly when focus is on KTextbox

[sairina]

Product

Kolibri

Expected behavior

The size of the outer div containing the KTextbox component should not move.

Actual behavior

All of the contents in outer div containing KTextbox shift slightly down every time a focus appears.

Steps to reproduce the issue

1. Go to any KTextbox element
2. Click on it (or use the keyboard to tab into it) and notice the slight shift. It is more noticeable when there is error validation.

Environment

• OS: Mac
• Browser version: Chrome

Additional information

@indirectlylit From here:

One thing I'm seeing is that the vertical layout is shifting slightly on focus – though this might be due to the validation and not the new focus outline. Preferably, neither of these would cause a shift in height.

I double-checked with both clicking by mouse or tabbing with the keyboard and it seems to shift with focus, which I think means that it is validation-related. I will open a separate issue for this problem.

Originally posted by @sairina in #191 (comment)