Angular (10) material touchUi datepicker - can't select anything

Good morning,

I've recently updated a fairly old Angular project from ~6 to 10. After all the other parts of it that I've had to fix, I'm left with just the material date picker that I can't get working again.

In short: It works, it comes up, I can flick the months and hit the year dropdown, but anything within the main content area, I can't click (both dates and years). Well, I can click but doesn't do anything. No console output.

My basic datepicker wrapper component:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'date-picker-component',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {

  @Input() public disabled: boolean;
  @Input() public placeholder: string;
  @Input() public value: Date;
  @Input() public minDate: Date;
  @Input() public maxDate: Date;
  @Input() public filter: Function;
  @Output() public onSelect = new EventEmitter<Date>();

  public onDateChange(date: Date): void {
    this.onSelect.emit(date);
  }
}

<mat-form-field fxFlexFill>
  <input matInput 
    [value]="value"
    [min]="minDate"
    [max]="maxDate"
    [matDatepicker]="picker"
    [placeholder]="placeholder"
    (dateChange)="onDateChange($event.value)"
    (click)="picker.open()"
    [matDatepickerFilter]="filter"
    [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

Example usage:

<date-picker-component
    [disabled]="!availableDates || loading"
    [minDate]="today"
    [filter]="dateFilter()"
    placeholder="Select trial date"
    (onSelect)="onDateSelected($event)">
</date-picker-component>

Opening the picker works:

Showing the picker:

Frantically clicking a date does nothing:

Showing the year selection:

Frantically clicking a year does nothing:

Month switching works fine:

And for final details, the relevant packages:

    "@angular/animations": "10.1.3",
    "@angular/cdk": "10.2.2",
    "@angular/common": "10.1.3",
    "@angular/compiler": "10.1.3",
    "@angular/core": "10.1.3",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "10.1.3",
    "@angular/material": "10.2.2",
    "@angular/platform-browser": "10.1.3",
    "@angular/platform-browser-dynamic": "10.1.3",
    "@angular/router": "10.1.3",
    "buffer": "5.6.0",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.5",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "moment": "2.29.0",
    "rxjs": "6.6.3",
    "tslib": "2.0.0",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.3"

Oh, also useful I suppose is proving setup details (in app.module.ts providers):

{
  provide: MAT_DATE_LOCALE,
  useValue: 'en-GB'
}

And also importing MatNativeDateModule somewhere or other...

Edit: Initial cause found to be the filter. It doesn't like the filter. Take the filter off and I can select the dates and things again. Doesn't help much, but it's a start. Filter is working - can see that with the filtered dates, but won't allow the selection thereof.

Here's the filter for the above:

public dateFilter(): (dt: Date) => boolean {
    const fn = (dt: Date): boolean => {
      const day = DateExtensions.toStringFormat(dt, 'dddd');
      return ArrayExtensions.firstOrDefault(this._availableDates, x => x.day === day) != undefined;
    };

    return fn;
}

Fix found by this glorious individual on my GitHub post.

Seems Angular 11 doesn't like the original way of evaluating the filter:

public dateFilter(): (dt: Date) => boolean { ... }

<date-picker-component
    [filter]="dateFilter()"
    ...>
</date-picker-component>

Instead, it's now happy with:

public dateFilter = (dt: Date): boolean => { ... }

<date-picker-component
    [filter]="dateFilter"
    ...>
</date-picker-component>