Height of hoo-input-text changes when focused

[gabbsmo]

Describe the bug When focusing a hoo-input-text input it get slightly higher, pushing down content below.

To Reproduce Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Use DevTools to add a <p> or something below the input
3. Focus the input
4. Notice the text below being pushed down a bit.

Expected behavior Size of focused element should not change

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 122

Additional context You can workaround the bug by changing:

.hoo-input-text:focus {
    line-height: calc(1.9rem - 2px);
}

to:

.hoo-input-text:focus {
    /* Base line-height on same as .hoo-input-text (without focus) selector */
    line-height: calc(1.875rem - 2px);
}

[StfBauer]

Thank you for that.

[StfBauer]

Fixed in in 2.4. 0

[gabbsmo]

@StfBauer Looked more into this. It is certainly improved after your changes but I think it can be better. Having line height and padding based on rem while borders are in px creates some risk of rounding errors. While the outer box is stable now, I can still see the inner text of the input jump a little.

I propose that instead of changing the border and line height, we can add a outline outside the border. Something like this:

.hoo-input-text:focus {
    line-height: 1.875rem; /* Restore non focused line-height */
    padding: 0 0.5rem; /* Restore non focused padding. */
    border: 1px solid var(--themePrimary); /* Probably only need the color change in PR */
    outline: 1px solid var(--themePrimary); /* Adds thicker border, without changing the inner box dimensions */
}

.hoo-input-text:focus:invalid {
    border: 1px solid var(--errorText);
    outline: 1px solid var(--errorText);
}

input[type="search"].hoo-input-text:focus {
    border-left: none;
}

The code above is a workaround of course. Can be more elegant in a real change.

[StfBauer]

Yeah not changing anything at this point in favor of going to Fluent 2.

[gabbsmo]

Ok I understand. Noticed a few regressions in invalid fields and the search box so updated my code snippet to account for that.