[TextField] Shrink form label when input is autofilled

[antoinerousseau]

Fixes #718.

[simensen]

@antoinerousseau very cool! excited to see how this goes. is this failing test something related to your code or some other type of test failure?

[oliviertassinari]

Could we use the hasValue state instead of this new isAutofilled even if we can't read the value for security converns?

[antoinerousseau]

yeah i don't see why not :)

[oliviertassinari]

That looks good to me 👍.

[oliviertassinari]

Actually, what do you think about running this test only if isValid(e.target.value) is false?
We could save some CPU cycles :). I don't know how expensive a try / catch and matches is.

[antoinerousseau]

you're right!

[antoinerousseau]

wait, i'm having a weird bug where chrome takes a millisecond or two between dispatching the change event and adding the :-webkit-autofill pseudo class, when autofilling...

[antoinerousseau]

I could not come up with a better solution than checking the pseudo class after the component is mounted, since Chrome 48 does not dispatch a change event when autofilling...

But anyway, now it works well if you don't mind the timer ^^'

[mbrookes]

@newoga - tagging you because I know you have an aversion to timers. 😄

Not sure there's an alternative though.

[newoga]

I want to put this on hold for now. I'm not completely thrilled with this implementation (though not just because of the timer, so not @antoinerousseau's fault). The reality is we want TextField to become a controlled component, but there's not really an easy and natural way to use the input value that was set from autofill events.

This topic is being discussed in both the React and Angular communities (such as facebook/react#1159). Furthermore, based on the little I read, there may be edge cases that involve browsers outside of Chrome. I'm hesitant to put this logic in the TextField's componentDidMount component if it can be handled elsewhere or solved using other approaches.

If we wanted to go down this path, I'd probably argue for creating a separate Input component that handled these edgecases and using that in TextField instead of the standard input. It wouldn't be perfect, but we could at least have the Input component trigger an onChange event after it mounts if it was autofilled, that way TextField could keep it's current behavior. The implementation in Input would probably be a lot simpler and wouldn't require state or timers.