bug(matDatepickerFilter): No date clickable if matDatepickerFilter is set with ".bind(this)"

[felixfiskare]

Inside my matDatepickerFilter I need to access the component. Till Angular 9 it worked to set bind(this) on the filter Function.
Unfortunately this doesn't work no longer. Whenever I define a matDatepickerFilter in a template like this [matDatepickerFilter]="valiDateStart.bind(this)" I can't click on a month on the corresponding matDatePicker.
Once I remove the bind(this) the datePicker works again.

Reproduction

https://stackblitz.com/edit/components-issue-5tpaxb?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

1. Click on second calender Icon
2. Click a month on the opening popup

Expected Behavior

I would expect to see the month view for the clicked month

Actual Behavior

No reaction. The month selection view is still shown

Environment

• Angular: Had the problem with Angular 10 and 11
• CDK/Material: 10 & 11 as well
• Browser(s): Current Firefox, Current Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Currently using Fedora, haven't checked another OS yet

[crisbeto]

Calling bind like this in the view causes change detection to run continuously since it returns a new function instance on each detection run. You should declare your bound function ahead of time like this: https://stackblitz.com/edit/components-issue-gpyqth?file=src%2Fapp%2Fexample-component.html

[felixfiskare]

Awesome! Thank you so much!

[pionas]

Hi,

i have a problem similar to you but i need add two arguments.
[matDatepickerFilter]="myFilter.bind(this, i, ii)"
how can i do it?

https://stackblitz.com/edit/components-issue-cjthe5?file=src%2Fapp%2Fexample-component.ts this not working

[pionas]

@crisbeto https://stackblitz.com/edit/components-issue-cjthe5?file=src%2Fapp%2Fexample-component.html this not working

[crisbeto]

See the example above. You need to move your bind call into a property, otherwise you're triggering infinite change detection.

[pionas]

@crisbeto but how? i have got a list of datepicker and everyone has custom own configuration and i need to know index of loop

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}