@vaadin/overlay 24.9.2 → 24.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.9.2",
+  "version": "24.9.4",
   "publishConfig": {
     "access": "public"
   },
@@ -36,18 +36,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.9.2",
-    "@vaadin/component-base": "~24.9.2",
-    "@vaadin/vaadin-lumo-styles": "~24.9.2",
-    "@vaadin/vaadin-material-styles": "~24.9.2",
-    "@vaadin/vaadin-themable-mixin": "~24.9.2",
+    "@vaadin/a11y-base": "~24.9.4",
+    "@vaadin/component-base": "~24.9.4",
+    "@vaadin/vaadin-lumo-styles": "~24.9.4",
+    "@vaadin/vaadin-material-styles": "~24.9.4",
+    "@vaadin/vaadin-themable-mixin": "~24.9.4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.9.2",
-    "@vaadin/test-runner-commands": "~24.9.2",
+    "@vaadin/chai-plugins": "~24.9.4",
+    "@vaadin/test-runner-commands": "~24.9.4",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "a26cb8ab518fde5b87dc740957f1cfa295dfae81"
+  "gitHead": "7084e972641ef2355ffc281cbd932c070f998ed1"
 }

package/src/vaadin-overlay-mixin.js

@@ -203,8 +203,25 @@ export const OverlayMixin = (superClass) =>
       }
     }
 
+    /**
+     * Whether to add global listeners for closing on outside click.
+     * By default, listeners are not added for a modeless overlay.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    _shouldAddGlobalListeners() {
+      return !this.modeless;
+    }
+
     /** @private */
     _addGlobalListeners() {
+      if (this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = true;
+
       document.addEventListener('mousedown', this._boundMouseDownListener);
       document.addEventListener('mouseup', this._boundMouseUpListener);
       // Firefox leaks click to document on contextmenu even if prevented
@@ -214,6 +231,12 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _removeGlobalListeners() {
+      if (!this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = false;
+
       document.removeEventListener('mousedown', this._boundMouseDownListener);
       document.removeEventListener('mouseup', this._boundMouseUpListener);
       document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
@@ -247,13 +270,20 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _modelessChanged(modeless) {
+      if (this.opened) {
+        // Add / remove listeners if modeless is changed while opened
+        if (this._shouldAddGlobalListeners()) {
+          this._addGlobalListeners();
+        } else {
+          this._removeGlobalListeners();
+        }
+      }
+
       if (!modeless) {
         if (this.opened) {
-          this._addGlobalListeners();
           this._enterModalState();
         }
       } else {
-        this._removeGlobalListeners();
         this._exitModalState();
       }
     }
@@ -275,7 +305,7 @@ export const OverlayMixin = (superClass) =>
 
         document.addEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._addGlobalListeners();
         }
       } else if (wasOpened) {
@@ -290,7 +320,7 @@ export const OverlayMixin = (superClass) =>
 
         document.removeEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._removeGlobalListeners();
         }
       }
@@ -468,12 +498,12 @@ export const OverlayMixin = (superClass) =>
      * @private
      */
     _keydownListener(event) {
-      if (!this._last) {
+      if (!this._last || event.defaultPrevented) {
         return;
       }
 
       // Only close modeless overlay on Esc press when it contains focus
-      if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this.$.overlay)) {
         return;
       }