Setting input value after page load (i.e. autofill) does not trigger floating label

[ianmcburnie]

To simulate browser autofill, and to illustrate the bug, I added a button that updates the text of the input.

[ianmcburnie]

I guess this can potentially be handled on the app side by waiting to do instantiation after DOMContentLoaded event:

For autofill:

document.addEventListener('DOMContentLoaded', function() {
  // instantiate FloatingLabel
  floatingLabelInstance = new FloatingLabel(el);
});

For setting programmatically:

input.value = "Slartibartfast";
floatingLabelInstance.refresh();

Where refresh is a new instance method.

[ianmcburnie]

Previous comment does not take into account Chrome's behaviour:

This screenshot and further details are at: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7

This could be a good candidate for another plugin, makeup-autofill-emitter.

[ianmcburnie]

For now I feel like this should be handled by app logic. This module now provides a refresh method which can be called after a programmatic change to value in order to update state of the floating label.

So, for example, refresh() would be called on each widget after a form reset button is clicked or some other button that programmatically sets or clears the input.

If we get a good solve for handling autofill within the widget itself, we can come back to this.