Components: bug(mat-date-range-picker): MatEndDate dateChanged is triggered by changes to start and end date

[jacobfederer]

Reproduction

Stackblitz demo:

https://components-issue-aypuzh.stackblitz.io

Steps to reproduce:

1. Create a MatDateRangePicker as shown in the docs
2. Add the dateChanged attribute to matStartDate or matEndDate
3. Start to change dates

Expected Behavior

What behavior were you expecting to see?

That the date changed attribute on matEndDate is only triggered when you change the end date. Or a way to detect when both start and end date have successfully been set.

Actual Behavior

What behavior did you actually see?

The date changed attribute on matEndDate is triggered both when you change the start and end date.

Environment

• Angular: 10.0.0
• CDK/Material: Material 10.0.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[mval1002]

I just came across the same issue. In my case it was pretty easy to get around by simply adding an if statement at the beginning of the called function checking if end date has a value.

On one hand, I think the current implementation makes sense, as it does set the end date to null after selecting the start date. On the other hand, it would nice to see an Output added to perhaps mat-date-range-input that triggers after both dates are selected