HealthCatalyst / Fabric.Cashmere

Health Catalyst’s comprehensive design system.
http://cashmere.healthcatalyst.net
Apache License 2.0
66 stars 76 forks source link

Error: Cannot read properties of null (reading 'removeChild') #2257

Open srkinyon-vw opened 10 months ago

srkinyon-vw commented 10 months ago

Summary

When closing a modal under some conditions an error (Cannot read properties of null (reading 'removeChild')) occurs during tear-down.

Additional context

Call Stack: webpack:/./node_modules/@healthcatalyst/cashmere/fesm2020/healthcatalyst-cashmere.mjs in removeModalElements on line 11565:44

this.removeModalElements();
}
removeModalElements() {
if (this.window) {
const windowNativeElement = this.window.location.nativeElement;
windowNativeElement.parentNode.removeChild(windowNativeElement);
this.window.destroy();
}
if (this.overlay) {
const overlayNativeElement = this.overlay.location.nativeElement;
overlayNativeElement.parentNode.removeChild(overlayNativeElement);

webpack:/./node_modules/@healthcatalyst/cashmere/fesm2020/healthcatalyst-cashmere.mjs in close on line 11552:14

/** Closes the modal with a result.
* Use this close method when opening a modal using a TemplateRef.
* To close a modal that was created from a Component, inject ActiveModal and use the close method
* on ActiveModal */
close(result) {
this.removeModalElements();
this._result.next(result);
}
/** Dismisses the modal with no result.
* Use this dismiss method when opening a modal using a TemplateRef.
* To dismiss a modal that was created from a Component, inject ActiveModal and use the dismiss method

webpack:/./node_modules/@healthcatalyst/cashmere/fesm2020/healthcatalyst-cashmere.mjs in close on line 11765:19

modal.window = window;
setTimeout(() => {
window.instance._trapFocus();
});
activeModalRef.close = (result) => {
modal.close(result);
};
activeModalRef.dismiss = () => modal.dismiss();
this._modalsOpen++;
modal._modalClose.subscribe(() => {
this._modalsOpen--;

Original call: this._activeModal.close(false);

Suggested Fix

if (this.window) {
const windowNativeElement = this.window.location.nativeElement;
if (windowNativeElement?.parentNode) {
  windowNativeElement.parentNode.removeChild(windowNativeElement); 
}
this.window.destroy();
}