Merge branch 'master' of https://github.com/xtermjs/xterm.js into #2737_fix

src/browser/renderer/BaseRenderLayer.ts

@@ -16,6 +16,7 @@ import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'browser/Color';
+import { removeElementFromParent } from 'browser/Dom';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -60,7 +61,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   }
 
   public dispose(): void {
-    this._canvas.parentElement?.removeChild(this._canvas);
+    removeElementFromParent(this._canvas);
     this._charAtlas?.dispose();
   }
 

src/browser/renderer/dom/DomRenderer.ts

@@ -12,6 +12,7 @@ import { ICharSizeService } from 'browser/services/Services';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { color } from 'browser/Color';
+import { removeElementFromParent } from 'browser/Dom';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -95,10 +96,11 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public dispose(): void {
     this._element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
-    this._screenElement.removeChild(this._rowContainer);
-    this._screenElement.removeChild(this._selectionContainer);
-    this._screenElement.removeChild(this._themeStyleElement);
-    this._screenElement.removeChild(this._dimensionsStyleElement);
+
+    // Outside influences such as React unmounts may manipulate the DOM before our disposal.
+    // https://github.com/xtermjs/xterm.js/issues/2960
+    removeElementFromParent(this._rowContainer, this._selectionContainer, this._themeStyleElement, this._dimensionsStyleElement);
+
     super.dispose();
   }