bug(mat-date-range-picker): Unable to pick a date when using functions with [min],[max]

[stnor]

Reproduction

https://stackblitz.com/edit/mat-date-range-fn-bug

Steps to reproduce:

1. Pick a date using the first date picker ([min], [max] bound with member variable) - works as expected
2. Pick a date using the second date picker ([min], [max] bound with function) - UNABLE TO PICK A DATE RANGE.

Expected Behavior

I am expecting that the date-range-picker can be set with dynamic mutable min and max values.

Actual Behavior

You are unable to use the picker when [min] or [max] or both is bound to a function that returns new Date or Moment objects every time.

Environment

• Angular: 10.0.2
• CDK/Material: 10.0.1
• Browser(s): Chrome and Safari
• Operating System: macOS

[stnor]

It seems like setting a new [min, max] triggers a change. So I suspect a change loop (too)...

ping @mmalerba @crisbeto

In my more complex use case with multiple date-range-pickers in an ngFor I worked around this by doing the following:

min bound to minArray[index] and max to maxArray[index] instead of getPeriodMin(index), getPeriodMax(index)

        this.periods.valueChanges.subscribe(change => change.forEach((p: ChallengePeriod, index: number) => {
            let min = this.getPeriodMin(index);
            let max = this.getPeriodMax(index);

            if (this.minArray[index] == null || !this.minArray[index].isSame(min,'day')) {
                this.minArray[index] = min;
            }
            if (this.maxArray[index] == null || !this.maxArray[index].isSame(max, 'day')) {
                this.maxArray[index] = max;
            }
        }));

Sometimes the picking still does not work (need to try twice). Selection always works though.

[crisbeto]

The problem here is that by returning a new date object every time, you're causing Angular to trigger change detection continuously. @swseverance submitted a fix for it in #19923, but I don't think that it's the way to go, because it's masking the error and it'll still be a performance issue for you down the road. The way to do this correctly would be to have properties for the min/max dates which you only update when the date actually changes.

[stnor]

While I generally agree with you on the perf issues, is seems like poor design that I kill the picker by doing a function binding, and why is the picker spawning changes when min, max changes? They are not part of the change object.

[stnor]

Also, why not check if the date/moment is an actual change (a different day) for all values (min,max,from,to) before triggering a change, like I did in the workaround above.

[crisbeto]

A change needs to be triggered when the min or max changed so that the view can be updated if the validation state is different as a result of the new value. As mentioned above, we can check that the new value is actually different like in #19923, but by doing so we would be masking your performance issue, making it more difficult to track down.