Programmatic and Autofill Input Detection in AuroInput

[StephenRiosDev]

Programmatic Input Detection Problems

Issue 1

Previously we were only running validation when the value of an input changed and the input had focus. With this new implementation we are saying we want to run validation even if the input doesn’t have focus.

This causes a race condition for validation. Consider the following scenario:

• Call el.reset
  • Reset calls this.value = undefined
  • Reset calls this.validation.reset
  • Updated lifecycle hook sees this and sets the HTML5 input value to “”
  • New programmatic detection sees this value change and fires an input event
  • Input handler sees that a programmatic change was made and runs validation
  • There is now a race condition between the call to this.validation.reset called by reset and this.validation.validate() called by the input handler

Possible Solution

We might need to look at implementing a more specific autofill detection that taps into the autofill CSS such as using the :-webkit-autofill to detect animation starts in JS for the pseudo selector, or detecting a change in background or filter color as applied by browsers to determine if an autofill has happened. Both solutions can be seen here: https://stackoverflow.com/questions/11708092/detecting-browser-autofill

Issue 2

We are now calling validation at times we specifically didn’t want to before, and this is breaking some tests because validation is running and failing, specifically for unit tests that test values that are currently unsupported by our date utilities, namely:

• yy
• yyyy
• mm
• dd

The work to support these individual formats was taken up but never completed, see GitHub ticket: AlaskaAirlines/auro-library#134

Possible Solution

Since these unit tests literally just set the value and check for the value to be equal to what was set, it’s probably safe to comment them out for now until the work to support these formats in the date utilities is completed.