FormControl updateOn blur mode not working properly only for datepicker control.

[sudd03]

Reproduction

FormControl updateOn blur mode not working properly only for datepicker control.

Steps to reproduce:

1. Use following stackblitz links to reproduce issue. In that, the form control is SET as to update only on blur. Also I added alter message on valueChange event.
2. Use both link and change date by removing from input box using 'Backspace/Delete' keyword.
3. You can see in version @angular/material 7.2.2 it respecting blur event and will not show alert of change event.
4. For @angular/material 7.3.1, you will see the alert message after the removing or modifying dates using 'Backspace/Delete' keyword.
5. As focus is not change from control so it should not emit the change event because it set as to change on blur.

Here is example with @angular/material 7.3.1 version in which have issue.

https://stackblitz.com/edit/datepicker-issue-with-angularmaterial-731

Earlier version (@angular/material 7.2.2), the blur event was working fine.

https://stackblitz.com/edit/datepicker-issue-with-angularmaterial-722

This issue exist in @angular/material 8.0.2 as well.

Expected Behavior

formControl blur event should work properly and it emit change event only if we focus out from control.

Actual Behavior

Form Control datepicker triggering the change event while modifying the date on control even it set as updateOn blur.

Environment

• Angular: 8.0.1
• CDK/Material:8.0.1 and latest
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): windows 10

[jerome-nelson]

Still investigating but this specifically seems to occur when attempting to delete the / after deleting a date section.

Able to reproduce on local build as well

[sudd03]

Yes, it reproduced when we are deleting the date.

FYI, I found issue with following code from datepicker.es5.js ('node_modules@angular\material\esm5')

Angular: 8.0.1
CDK/Material:8.0.1 and latest

/**
     * @param {?} value
     * @return {?}
     */
    MatDatepickerInput.prototype._onInput = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        /** @type {?} */
        var date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
        this._lastValueValid = !date || this._dateAdapter.isValid(date);
        date = this._getValidDateOrNull(date);
        if (!this._dateAdapter.sameDate(date, this._value)) {
            this._value = date;
            this._cvaOnChange(date);
            this._valueChange.emit(date);
            this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
        }
        else {
            **this._validatorOnChange();**
        }
    };

I attached the files with debug information and found that the 'this._dateAdapter.sameDate' failing for when you remove '/' and earlier one character. Since the years and date is coming as same. See screenshot.

Due to this in else part it triggering the '_validatorOnChange' and emitting value change.

Sharing with you so it will help for fix.

--
Sudhir.

[jerome-nelson]

Good catch @sudd03 - it seems simply adding a 'hasFocus' condition preventing the validateOnChange from firing would be the way to go.

You're welcome to contribute a proposed fix

[sudd03]

Sure, I'd love to do contribution for fix.

Thanks.

[jerome-nelson]

Check here and go for it:
https://github.com/angular/components/blob/master/CONTRIBUTING.md

If you want any help on anything then just add a comment here

[jerome-nelson]

@sudd03 any luck? I can take this otherwise

[sudd03]

Hi, Jerome,

I fixed it locally but unable to publish due to permission issue on git master branch.

Getting following error. Any suggestion do you have how to resolve permission on master branch?

Permission to angular/components.git denied to sudd03.

[jerome-nelson]

@sudd03 We are not allowed to create branches on angular/components. You need to fork the repo, not clone and then do a PR from your fork to angular/components :-)

[sudd03]

Thank you. I submitted the pull request for review. :)

[jerome-nelson]

Nice going - there are some amendments to make however.

1. You need to commit these changes on a new branch not on master. And then you add that branch for PR against angular/components master branch (example: feat(select): allow for letter key debounce interval to be customized #16579)
2. This still needs to be approved - it might not be approved for merge
3. You'll know you did it correctly when the angular/components CI starts to test your PR

[sudd03]

Hi,

There is issue with CLA. Even I singed it and reply there as well with comments. Other tests are passed but two test are failed due to CLA.

Any suggestion have here?

[SleekPanther]

https://github.com/angular/components/blob/master/CONTRIBUTING.md#-signing-the-cla has information about the CLA
It also looks like you're missing some labels for what kind of code change it is, this case it's probably a fix

[sudd03]

Yes, the labels was about CLA agreement. I signed that CLA but won't resolve. It maybe due to git.config settings on my system vs git account email/name.

[ThomasBoersma]

I am still facing this issue and I saw that the PR still needs to be merged. What is the update on this? Is there maybe a workaround?

Thanks.

[SleekPanther]

@ThomasBoersma Unfortunately I still don't think it will let him submit the pull request. I haven't tried myself.
The code change was minor but the bug definitely still exists and we are forced to stay on Angular 7 for this reason.
If you want to try and get the pull request approved yourself, please do. We just want to get the issue fixed and passing the pull requests commit checks is the blocker.