fix: pointer-events when content has CSS animations (#158, #173)

Fixes #158
vaadin · Mar 5, 2020 · 1e9e4c0 · 1e9e4c0
1 parent edd53da
commit 1e9e4c0
Show file tree

Hide file tree

Showing 2 changed files with 221 additions and 107 deletions.
diff --git a/src/vaadin-overlay.html b/src/vaadin-overlay.html
@@ -578,7 +578,10 @@
 
       _enqueueAnimation(type, callback) {
         const handler = `__${type}Handler`;
-        const listener = () => {
+        const listener = event => {
+          if (event && event.target !== this) {
+            return;
+          }
           callback();
           this.removeEventListener('animationend', listener);
           delete this[handler];
@@ -599,15 +602,15 @@
           this._flushAnimation('closing');
         }
         this._attachOverlay();
+        if (!this.modeless) {
+          this._enterModalState();
+        }
         this.setAttribute('opening', '');
 
         const finishOpening = () => {
-          this.removeAttribute('opening');
           document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
 
-          if (!this.modeless) {
-            this._enterModalState();
-          }
+          this.removeAttribute('opening');
         };
 
         if (this._shouldAnimate()) {
@@ -629,30 +632,29 @@
           this._flushAnimation('opening');
         }
         if (this._placeholder) {
-          this.setAttribute('closing', '');
+          this._exitModalState();
 
-          const finishClosing = () => {
-            this.shadowRoot.querySelector('[part="overlay"]').style.removeProperty('pointer-events');
+          if (this.restoreFocusOnClose && this.__restoreFocusNode) {
+            // If the activeElement is `<body>` or inside the overlay,
+            // we are allowed to restore the focus. In all the other
+            // cases focus might have been moved elsewhere by another
+            // component or by the user interaction (e.g. click on a
+            // button outside the overlay).
+            const activeElement = this._getActiveElement();
 
-            this._exitModalState();
+            if (activeElement === document.body || this._deepContains(activeElement)) {
+              this.__restoreFocusNode.focus();
+            }
+            this.__restoreFocusNode = null;
+          }
 
+          this.setAttribute('closing', '');
+
+          const finishClosing = () => {
             document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
             this._detachOverlay();
+            this.shadowRoot.querySelector('[part="overlay"]').style.removeProperty('pointer-events');
             this.removeAttribute('closing');
-
-            if (this.restoreFocusOnClose && this.__restoreFocusNode) {
-              // If the activeElement is `<body>` or inside the overlay,
-              // we are allowed to restore the focus. In all the other
-              // cases focus might have been moved elsewhere by another
-              // component or by the user interaction (e.g. click on a
-              // button outside the overlay).
-              const activeElement = this._getActiveElement();
-
-              if (activeElement === document.body || this._deepContains(activeElement)) {
-                this.__restoreFocusNode.focus();
-              }
-              this.__restoreFocusNode = null;
-            }
           };
 
           if (this._shouldAnimate()) {
@@ -715,7 +717,7 @@
 
         // Disable pointer events in other attached overlays
         OverlayElement.__attachedInstances.forEach(el => {
-          if (el !== this && !el.hasAttribute('opening') && !el.hasAttribute('closing')) {
+          if (el !== this) {
             el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
           }
         });