@vaadin/vaadin-context-menu - npm Package Compare versions

Comparing version 4.3.4 to 4.3.5

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "main": "vaadin-context-menu.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-context-menu-overlay.js

@@ -75,2 +75,19 @@ /**
 
+  ready() {
+    super.ready();
+
+    this.addEventListener('keydown', e => {
+      if (!e.defaultPrevented && [38, 40].indexOf(e.keyCode) > -1) {
+        e.preventDefault();
+        const list = this.firstElementChild;
+        if (e.keyCode === 38) {
+          const item = list.items[list.items.length - 1];
+          item && item.focus();
+        } else {
+          list.focus();
+        }
+      }
+    });
+  }
+
   getBoundaries() {
@@ -77,0 +94,0 @@ // Measure actual overlay and content sizes

src/vaadin-context-menu.js

@@ -264,3 +264,3 @@ /**
   static get version() {
-    return '4.3.4';
+    return '4.3.5';
   }
@@ -386,7 +386,3 @@
     this.$.overlay.style.opacity = '';
-
-    const child = this.$.overlay.content.querySelector(':not(style):not(slot)');
-    if (child) {
-      child.focus();
-    }
+    this.__forwardFocus();
   }
@@ -393,0 +389,0 @@

src/vaadin-contextmenu-items-mixin.js

@@ -118,2 +118,18 @@ import { ItemElement } from '@vaadin/vaadin-item/src/vaadin-item.js';
 
+  __forwardFocus() {
+    const overlay = this.$.overlay;
+    const child = overlay.content.querySelector(':not(style):not(slot)');
+    // if parent item is not focused, do not focus submenu
+    if (overlay.parentOverlay) {
+      const parent = overlay.parentOverlay.querySelector('[expanded]');
+      if (parent && parent.hasAttribute('focused') && child) {
+        child.focus();
+      } else {
+        overlay.$.overlay.focus();
+      }
+    } else if (child) {
+      child.focus();
+    }
+  }
+
   __openSubMenu(subMenu, itemElement) {
@@ -120,0 +136,0 @@ subMenu.items = itemElement._item.children;

theme/lumo/vaadin-context-menu-styles.js

@@ -35,2 +35,5 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 
+      [part="overlay"] {
+        outline: none;
+      }
     </style>
@@ -37,0 +40,0 @@ </template>

theme/material/vaadin-context-menu-styles.js

@@ -10,2 +10,5 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
     <style include="material-menu-overlay">
+      [part="overlay"] {
+        outline: none;
+      }
     </style>
@@ -12,0 +15,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

63172

increased by1.48%

Number of downloads

13832

increased by4.1%

Lines of code

1279

increased by2.65%

No dependency changes