diff --git a/src/vaadin-context-menu-overlay.html b/src/vaadin-context-menu-overlay.html
index 3543bad8..79cf4461 100644
--- a/src/vaadin-context-menu-overlay.html
+++ b/src/vaadin-context-menu-overlay.html
@@ -73,6 +73,10 @@
};
}
+ static get observers() {
+ return ['_themeChanged(theme)'];
+ }
+
ready() {
super.ready();
@@ -95,6 +99,10 @@
return this.content.querySelector(':not(style):not(slot)');
}
+ _themeChanged(theme) {
+ this.close();
+ }
+
getBoundaries() {
// Measure actual overlay and content sizes
const overlayRect = this.getBoundingClientRect();
diff --git a/src/vaadin-context-menu.html b/src/vaadin-context-menu.html
index 70c90dd9..6efeaefe 100644
--- a/src/vaadin-context-menu.html
+++ b/src/vaadin-context-menu.html
@@ -248,6 +248,8 @@
*
* Note: the `theme` attribute value set on `` is
* propagated to the internal `` component.
+ * In case of using nested menu items, the `theme` attribute is also propagated
+ * to internal `vaadin-context-menu-list-box` and `vaadin-context-menu-item`'s.
*
* @memberof Vaadin
* @mixes Vaadin.ElementMixin
diff --git a/src/vaadin-contextmenu-items-mixin.html b/src/vaadin-contextmenu-items-mixin.html
index 2a7ae6f6..ad0fb65f 100644
--- a/src/vaadin-contextmenu-items-mixin.html
+++ b/src/vaadin-contextmenu-items-mixin.html
@@ -156,6 +156,13 @@
// Store the reference to align based on parent overlay coordinates
subMenu.$.overlay._setParentOverlay(parent);
+ // Set theme attribute from parent element
+ if (parent.theme) {
+ subMenu.setAttribute('theme', parent.theme);
+ } else {
+ subMenu.removeAttribute('theme');
+ }
+
let x;
content.style.minWidth = '';
if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
@@ -200,6 +207,7 @@
component.setAttribute('role', 'separator');
}
component.classList.add('vaadin-menu-item');
+ this.theme && component.setAttribute('theme', this.theme);
component._item = item;
@@ -241,6 +249,7 @@
`;
Polymer.flush();
const listBox = root.querySelector('vaadin-context-menu-list-box');
+ this.theme && listBox.setAttribute('theme', this.theme);
listBox.classList.add('vaadin-menu-list-box');
requestAnimationFrame(() => listBox.setAttribute('role', 'menu'));
const subMenu = root.querySelector('vaadin-context-menu');
@@ -323,6 +332,13 @@
menu.$.overlay.addEventListener(openEvent, openSubMenu);
menu.$.overlay.addEventListener('keydown', e =>
(e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32) && openSubMenu(e));
+ } else {
+ const listBox = root.querySelector('vaadin-context-menu-list-box');
+ if (this.theme) {
+ listBox.setAttribute('theme', this.theme);
+ } else {
+ listBox.removeAttribute('theme');
+ }
}
}
diff --git a/test/items.html b/test/items.html
index d06b914e..70e5bd0f 100644
--- a/test/items.html
+++ b/test/items.html
@@ -20,6 +20,14 @@
+
+
+
+
+
+
+
+