bug(datepicker): cannot get property "remove" of undefined when opening the datepicker under Internet Explorer

Reproduction

StackBlitz is not working under Internet Explorer, so I’ll join here a minimal repro project (cli-generated, single appComponent).

datepicker-ie-undef-ref-repro-project.zip

Steps to reproduce :

• npm install
• npm run start-ie
• open http://localhost:4200 with Internet Explorer 11
• open the dev tools with F12, switch to "Console tab
• clic on the datepicker icon => the datepicker is opening properly, however is raising an error

Expected Behavior

Working datepicker without undefined ref error.

Actual Behavior

Datepicker is working properly, but with an exception raised while opening. Stacktrace :

Impossible d’obtenir la propriété « remove » d’une référence null ou non définie
TypeError: Impossible d’obtenir la propriété « remove » d’une référence null ou non définie
at value (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:944089)
at value (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:933067)
at Anonymous function (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:301644)
at os (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:301403)
at $a (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:298437)
at Wa (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:298097)
at template (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:550837)
at Xr (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:276492)
at Wr (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:275179)
at yo (xxxx:8444/frontend/main-es5.205b6fea08fdd5940c22.js:1:281900)

Our project is using an Angular ErrorHandler which, among other things, is pushing the frontend errors stacktraces to backend. We currently have a stacktrace pushed for every datepicker usage, which is very annoying to detect other, more harmful frontend exceptions.

Environment

• Angular: 12.2.9
• CDK/Material: 12.2.9
• Browser(s): Internet Explorer 11
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

Thanks for tracking it down @alan-agius4. We reverted the change in the 12.2.x branch with https://github.com/angular/components/pull/23786.

[alan-agius4]

@crisbeto, there wasn’t any change regarding this and classlist.js as this always on opt-in bases. The main reason for this is that the CLI only enables polyfills which are needed by the framework. Neither the framework nor material depended on classlist.js since these didn’t use NgClass on SVG elements.

Recently this changed however, as material became dependent on this polyfill because of this change which landed in 12.1.x. This sort of is a breaking change for existing v12 users and want to support IE 11 as they might not have classlist.js installed and enabled.

There are a number of things here that can be done;

1. Transfer the issue back in the components repo for visibility and do nothing else.
2. Enable the classlist.js polyfill for new users in v12
3. Add a migration to enable classlist.js polyfill in version 12 for existing users. That said, it’s unlikely that existing users will run migrations in patch versions.
4. Revert the change or find an alternative which doesn’t require classlist.js.