fix: prevent overlay opening when setting opened while disconnected (#9758)

Author: web-padawan

packages/overlay/src/vaadin-overlay-mixin.js

@@ -292,6 +292,12 @@ export const OverlayMixin = (superClass) =>
     /** @private */
     _openedChanged(opened, wasOpened) {
       if (opened) {
+        // Prevent possible errors on setting `opened` to `true` while disconnected
+        if (!this.isConnected) {
+          this.opened = false;
+          return;
+        }
+
         this._saveFocus();
 
         this._animatedOpening();

packages/overlay/test/basic.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, isIOS, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-import '../src/vaadin-overlay.js';
+import { Overlay } from '../src/vaadin-overlay.js';
 import { createOverlay } from './helpers.js';
 
 describe('vaadin-overlay', () => {
@@ -274,4 +274,86 @@ describe('vaadin-overlay', () => {
       overlay._detectIosNavbar.restore();
     });
   });
+
+  describe('disconnected', () => {
+    customElements.define(
+      'overlay-wrapper',
+      class extends HTMLElement {
+        constructor() {
+          super();
+
+          this.attachShadow({ mode: 'open' });
+
+          const overlay = document.createElement('wrapped-overlay');
+          this.overlay = overlay;
+
+          // Forward the slotted content from wrapper to overlay
+          const slot = document.createElement('slot');
+          overlay.appendChild(slot);
+
+          overlay.renderer = (root) => {
+            root.innerHTML = '<input placeholder="Input">';
+          };
+
+          this.shadowRoot.append(overlay);
+        }
+
+        get opened() {
+          return this.overlay.opened;
+        }
+
+        set opened(opened) {
+          this.overlay.opened = opened;
+        }
+
+        connectedCallback() {
+          const root = document.createElement('div');
+          this.overlay.__customRoot = root;
+          this.append(root);
+        }
+
+        disconnectedCallback() {
+          this.opened = false;
+        }
+      },
+    );
+
+    customElements.define(
+      'wrapped-overlay',
+      class extends Overlay {
+        get _contentRoot() {
+          return this.__customRoot;
+        }
+
+        _attachOverlay() {
+          this.setAttribute('popover', 'manual');
+          this.showPopover();
+        }
+
+        _detachOverlay() {
+          this.hidePopover();
+        }
+      },
+    );
+
+    let owner, overlay;
+
+    beforeEach(() => {
+      owner = document.createElement('overlay-wrapper');
+      document.body.appendChild(owner);
+      overlay = owner.shadowRoot.querySelector('wrapped-overlay');
+    });
+
+    it('should not call overlay opening when overlay is disconnected', async () => {
+      overlay.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      const spy = sinon.spy(overlay, '_attachOverlay');
+
+      owner.remove();
+      owner.opened = true;
+
+      expect(spy.called).to.be.false;
+    });
+  });
 });