fix: prevent backdrop click-through in iOS home screen apps (#12056) (#12062)

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: vaadin-bot

packages/app-layout/src/vaadin-app-layout-mixin.js

@@ -448,7 +448,9 @@ export const AppLayoutMixin = (superclass) =>
     }
 
     /** @private */
-    _onBackdropClick() {
+    _onBackdropClick(event) {
+      // End the ghost click window on the first click (see `_onBackdropTouchend`).
+      event.currentTarget.style.removeProperty('pointer-events');
       this._close();
     }
 
@@ -458,6 +460,18 @@ export const AppLayoutMixin = (superclass) =>
       // on clickable element behind the backdrop
       event.preventDefault();
 
+      // On iOS home screen (standalone) apps, `preventDefault()` on `touchend`
+      // does not reliably suppress the synthesized "ghost" click, which occurs
+      // on medium-length taps only. Keep the invisible backdrop hit-testable for
+      // a short while after closing, so that if a ghost click occurs it lands on
+      // the backdrop instead of the element behind it.
+      if (navigator.standalone) {
+        const backdrop = event.currentTarget;
+        backdrop.style.pointerEvents = 'auto';
+        // The ghost click arrives shortly after `touchend`.
+        setTimeout(() => backdrop.style.removeProperty('pointer-events'), 400);
+      }
+
       this._close();
     }
 

packages/app-layout/test/app-layout.test.js

@@ -432,6 +432,48 @@ describe('vaadin-app-layout', () => {
           expect(event.defaultPrevented).to.be.true;
         });
 
+        it('should not make the backdrop hit-testable after touchend when not standalone', () => {
+          makeSoloTouchEvent('touchend', null, backdrop);
+          expect(backdrop.style.pointerEvents).to.equal('');
+        });
+
+        // The backdrop is kept hit-testable for a while to catch the ghost click.
+        describe('standalone (iOS home screen)', () => {
+          let standaloneDescriptor, clock;
+
+          beforeEach(() => {
+            standaloneDescriptor = Object.getOwnPropertyDescriptor(navigator, 'standalone');
+            Object.defineProperty(navigator, 'standalone', { configurable: true, value: true });
+            clock = sinon.useFakeTimers();
+          });
+
+          afterEach(() => {
+            clock.restore();
+            if (standaloneDescriptor) {
+              Object.defineProperty(navigator, 'standalone', standaloneDescriptor);
+            } else {
+              delete navigator.standalone;
+            }
+          });
+
+          it('should keep the backdrop hit-testable after touchend', () => {
+            makeSoloTouchEvent('touchend', null, backdrop);
+            expect(backdrop.style.pointerEvents).to.equal('auto');
+          });
+
+          it('should stop keeping the backdrop hit-testable after the timeout', () => {
+            makeSoloTouchEvent('touchend', null, backdrop);
+            clock.tick(500);
+            expect(backdrop.style.pointerEvents).to.equal('');
+          });
+
+          it('should stop keeping the backdrop hit-testable after a click', () => {
+            makeSoloTouchEvent('touchend', null, backdrop);
+            backdrop.click();
+            expect(backdrop.style.pointerEvents).to.equal('');
+          });
+        });
+
         it('should close the drawer when calling helper method', () => {
           layout.constructor.dispatchCloseOverlayDrawerEvent();
           expect(layout.drawerOpened).to.be.false;