Skip to content

fix(datepicker): error in IE/Edge for static disabled binding #18202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/material/datepicker/datepicker-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
OnDestroy,
Optional,
Output,
AfterViewInit,
} from '@angular/core';
import {
AbstractControl,
Expand Down Expand Up @@ -91,7 +92,12 @@ export class MatDatepickerInputEvent<D> {
},
exportAs: 'matDatepickerInput',
})
export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, Validator {
export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, AfterViewInit,
Validator {

/** Whether the component has been initialized. */
private _isInitialized: boolean;

/** The datepicker that this input is associated with. */
@Input()
set matDatepicker(value: MatDatepicker<D>) {
Expand Down Expand Up @@ -169,7 +175,10 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
}

// We need to null check the `blur` method, because it's undefined during SSR.
if (newValue && element.blur) {
// In Ivy static bindings are invoked earlier, before the element is attached to the DOM.
// This can cause an error to be thrown in some browsers (IE/Edge) which assert that the
// element has been inserted.
if (newValue && this._isInitialized && element.blur) {
// Normally, native input elements automatically blur if they turn disabled. This behavior
// is problematic, because it would mean that it triggers another change detection cycle,
// which then causes a changed after checked error if the input element was focused before.
Expand Down Expand Up @@ -257,6 +266,10 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
});
}

ngAfterViewInit() {
this._isInitialized = true;
}

ngOnDestroy() {
this._datepickerSubscription.unsubscribe();
this._localeSubscription.unsubscribe();
Expand Down
3 changes: 2 additions & 1 deletion tools/public_api_guard/material/datepicker.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export declare class MatDatepickerContent<D> extends _MatDatepickerContentMixinB
static ɵfac: i0.ɵɵFactoryDef<MatDatepickerContent<any>>;
}

export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, Validator {
export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, AfterViewInit, Validator {
_dateAdapter: DateAdapter<D>;
_dateFilter: (date: D | null) => boolean;
_datepicker: MatDatepicker<D>;
Expand All @@ -197,6 +197,7 @@ export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDe
_onKeydown(event: KeyboardEvent): void;
getConnectedOverlayOrigin(): ElementRef;
getPopupConnectionElementRef(): ElementRef;
ngAfterViewInit(): void;
ngOnDestroy(): void;
registerOnChange(fn: (value: any) => void): void;
registerOnTouched(fn: () => void): void;
Expand Down