Datepicker - Cannot select dates

Good morning,

Apologies in advance, no reproduction available - probably not possible. This is more of an investigation enquiry as I can’t find the cause of the issue.

Recently updated an old project from 8 to 11, and seems the only thing along the way left causing any issue is the date picker.

Date picker seems to be working fine initially - opens in touchUi form and can navigate months:

<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>

However, I can’t click on any of the actual dates (or the years if I open that). Well, I can click on them, but it doesn’t do anything (in neither Chrome nor FF).

The td elements do have the event listeners attached to them, and a click event is firing and being picked up, but… nothing happens.

Hits into here…

… But I have no experience with Angular under the hood and following through all of that to make it efficient to attempt such.

Any thoughts on what may be causing this behaviour that I can fix? I doubt it’s an issue with material itself in some way (might be, I guess), so what could I possibly have done in this mammoth update process to have killed off date picker clicking, of all things?

My packages:

  "dependencies": {
    "@angular/animations": "11.0.2",
    "@angular/cdk": "11.0.0",
    "@angular/common": "11.0.2",
    "@angular/compiler": "11.0.2",
    "@angular/core": "11.0.2",
    "@angular/flex-layout": "11.0.0-beta.33",
    "@angular/forms": "11.0.2",
    "@angular/material": "11.0.0",
    "@angular/platform-browser": "11.0.2",
    "@angular/platform-browser-dynamic": "11.0.2",
    "@angular/router": "11.0.2",
    "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.3",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1100.2",
    "@angular/cli": "11.0.2",
    "@angular/compiler-cli": "11.0.2",
    "@angular/language-service": "11.0.2",
    "@types/jasmine": "3.6.0",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.11.1",
    "codelyzer": "6.0.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "5.0.2",
    "karma": "5.1.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-coverage-istanbul-reporter": "3.0.2",
    "karma-edge-launcher": "0.4.2",
    "karma-firefox-launcher": "1.1.0",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "karma-junit-reporter": "1.2.0",
    "karma-phantomjs-launcher": "1.0.4",
    "phantomjs-prebuilt": "2.1.16",
    "protractor": "7.0.0",
    "ts-node": "7.0.1",
    "tslint": "6.1.0",
    "typescript": "4.0.3"
  }

Edit: It works on other pages, but not this one. Either the one directly on the page or the one in the dialog (mat dialog) launched from that page…

[Krenom]

@BUONJG You glorious person you. That has done the trick nicely, thank you very much!

[angular-automatic-lock-bot[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.}