Fix context menu position on keyboard open

vaadin · May 26, 2019 · 14a8345 · 14a8345
1 parent 087204e
commit 14a8345
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/src/vaadin-context-menu.html b/src/vaadin-context-menu.html
@@ -654,9 +654,17 @@
               return this._getEventCoordinate(event.detail.sourceEvent, coord);
             }
           } else {
-            // Native mouse or touch event
             const prop = 'client' + coord.toUpperCase();
-            return event.changedTouches ? event.changedTouches[0][prop] : event[prop];
+            const position = event.changedTouches ? event.changedTouches[0][prop] : event[prop];
+
+            if (position === 0) {
+              // Native keyboard event
+              const rect = event.target.getBoundingClientRect();
+              return coord === 'x' ? rect.left : rect.top + rect.height;
+            } else {
+              // Native mouse or touch event
+              return position;
+            }
           }
         }
 

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -14,6 +14,7 @@
     "fire": false,
     "MockInteractions": false,
     "MockTouchInteractions": false,
-    "gemini": false
+    "gemini": false,
+    "MOBILE": false
   }
 }
diff --git a/test/common.js b/test/common.js
@@ -13,3 +13,5 @@ window.fire = (node, eventType, detail, eventProps) => {
   node.dispatchEvent(evt);
   return evt;
 };
+
+window.MOBILE = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
diff --git a/test/integration.html b/test/integration.html
@@ -45,13 +45,14 @@
       });
 
       describe('integration', () => {
-        let contextMenuButton, menu, button;
+        let contextMenuButton, menu, button, overlay;
 
         beforeEach((done) => {
           customElements.whenDefined('context-menu-button').then(() => {
             contextMenuButton = fixture('default');
             menu = contextMenuButton.$.menu;
             button = contextMenuButton.$.button;
+            overlay = menu.$.overlay;
             done();
           });
         });
@@ -60,6 +61,20 @@
           MockInteractions.tap(button);
           expect(menu.opened).to.eql(true);
         });
+
+        if (!MOBILE) {
+          it('should open context menu below button', (done) => {
+            MockInteractions.makeSoloTouchEvent('click', {y: 0, x: 0}, button);
+
+            setTimeout(() => {
+              const buttonRect = button.getBoundingClientRect();
+              const overlayRect = overlay.getBoundingClientRect();
+              expect(overlayRect.left).to.be.closeTo(buttonRect.left, 0.1);
+              expect(overlayRect.top).to.be.closeTo(buttonRect.top + buttonRect.height, 0.1);
+              done();
+            }, 1000);
+          });
+        }
       });
     </script>
 

diff --git a/test/items.html b/test/items.html
@@ -21,7 +21,6 @@
   </test-fixture>
 
   <script>
-    const MOBILE = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
     const OPENEVENT = MOBILE ? 'touchstart' : 'mouseover';
 
     describe('items', () => {

diff --git a/test/overlay.html b/test/overlay.html
@@ -23,8 +23,6 @@
     </test-fixture>
 
     <script>
-      const MOBILE = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-
       describe('overlay', () => {
         let menu, overlay, content, viewHeight, viewWidth;