Open blackfalcon opened 1 month ago
This looks very similar to an issue we are seeing with Datepicker: https://github.com/AlaskaAirlines/auro-datepicker/issues/247
Moving to investigate and see if these are a common root cause and come up with a holistic solution if that's the case
@blackfalcon @Patrick-Daly-AA Currently, I am NOT able to reproduce the bug from the first screenshot both locally and on the docsite.
@jordanjones243 please see this CodePen to illustrate the issue https://codepen.io/blackfalcon/pen/zYVWKwP
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.
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:
bordered
examplewidth
of the input to approx16%
or lesstab
andclick
/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