INPUT: Label placement issue with widths of 16% and below

[blackfalcon]

Please verify the version of auro-input you have installed

@latest

Please describe the bug

See screenshot taken from Auro doc site.

It appears that there is an issue where the label placement animation has issues when the width of the form input element is short in width, approx 16%.

What also can be noticed is that the error icons are not visible at widths less than 10%. See screenshot from app team that reported the issue. Also notice placement of label with datepicker labels. Undertermined if this is related to auro-input or specific to auro-datepicker.

To reproduce, use the following steps:

1. Go to https://auro.alaskaair.com/components/auro/input/api
2. Use any bordered example
3. Reduce width of the input to approx 16% or less
4. UI issue should present with both tab and click/tap

Reproducing the error on the docsite

This issue is reproducible on the Auro docsite

Expected behavior

The label placement should be consistent regardless of input width.

NOTE: It could also be considered that a min-width would be set by the Design System as to set a documented standard of width that the UIs will always perform as expected.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

The issue was communicated by the AirportCustomerExperience team. ID: 1087631

[Patrick-Daly-AA]

This looks very similar to an issue we are seeing with Datepicker: #139

Moving to investigate and see if these are a common root cause and come up with a holistic solution if that's the case

[jordanjones243]

@blackfalcon @Patrick-Daly-AA Currently, I am NOT able to reproduce the bug from the first screenshot both locally and on the docsite.

[blackfalcon]

@jordanjones243 please see this CodePen to illustrate the issue https://codepen.io/blackfalcon/pen/zYVWKwP

[jordanjones243]

I am now able to validate this issue. To replicate this issue, a user must TAB focus into the inputs to reproduce this error, rather than clicking inside the element.

[sun-mota]

What's Happening

(ONLY on Chrome)
The input element is bigger than the wrapper and the wrapper's scroll position is changed when user focuses the input with tapping

Cause

This is due to the overflowing input size which makes chrome to reposition the scroll (where the cursor to be very left of the wrapper on onfocus with keyboard input

Solution

Make .wrapper .main input to not to exceed the width of wrapper

[jordanjones243]

Blocked until a conversation with the design team about the layout of input.