Error ng-invalid-date whe then user clicks "X" in Chrome

[kimx]

Hi
I found another problem in Chrome.
1.Key in Month or Date or Year.Dot not use choose.
2.Use the "X" to clear the value -->Now $valid=true -->expect
3.Key in Month or Date or Year again.
4.Use the "X" to clear the value -->Now $valid=false -->error

http://plnkr.co/edit/2HPDq0bjzReyuNbvn7vz?p=preview

Reference Issue
#12853 (comment)

@gkalpak

[gkalpak]

Copying some comments over from #12853 for context:

---

Interesting facts:

1. When the mousedown event fires (when clicking on the "X"), it sets up a 0-delay timeout to check if the validity of the input has changed. We expect that by the time the timeout is triggered, the input will have changed (i.e. will have been cleared in this case) and the validity will have been restored. It doesn't.
2. By trial-and-error, I found out that a delay of 150ms is sufficient for the change to be picked up, but this threshold will probably differ based on browser/OS/device.
3. The first time you click the "X", an input event is also triggered, thus we are able to detect the change properly. This is why your step (2) above works. For whatever reason, the input event is only triggered the first time 😒

---

Suggestions:

For users: As a workaround, you can trigger an input event after a short timeout on mousedown (demo).

For Chrome: Always trigger an input event, when the user clicks "X".

For us: Not sure. Listening for mouseup (instead of or in addition to mousedown). Adding a small delay (150-200ms). TBH, I don't remember what mousedown event we expect to change the input. Is it only clicking the "X" or are there other usecases that we need to take into account?

---

/cc @jbedard (who fixed the previous bug)

[jbedard]

The mousedown is also for the up/down arrows to increment/decrement part of the date (which changes on mousedown, if you hold the mouse down it continuously increment/decrements it - so I think keeping mousedown is valuable).

If adding mouseup or click to the list of events listened to works then I think that's fine. I think I'd want to avoid a hardcoded delay though.

[Narretz]

You can also use ngModelOptions with updateOn and debounce to work around this problem:

{
  updateOn: 'mouseup default', 
  debounce: {
    mouseup: 150
  }
}

http://plnkr.co/edit/5aIQq6blCasCDjpjwTig?p=preview

[Narretz]

Note that the native Firefox date widget (tested in Dev tools) works completely different, too.
If you use the keyboard, it only fires input once you have filled all fields (no partial updates that would make the control invalid)
It also doesn't fire input if you first fill day, then month, then a four digit year - it only fires when you enter a 6 digit year, or if you blur the control. Must be a bug.