diff --git a/zktest/src/main/webapp/test2/B100-ZK-5025.zul b/zktest/src/main/webapp/test2/B100-ZK-5025.zul new file mode 100644 index 00000000000..2e14798957a --- /dev/null +++ b/zktest/src/main/webapp/test2/B100-ZK-5025.zul @@ -0,0 +1,79 @@ + + + + menuitem-hover + menu-hover + menuitem:hover + menu:hover + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/zul/src/main/resources/web/js/zul/menu/Menuitem.ts b/zul/src/main/resources/web/js/zul/menu/Menuitem.ts index fcbcf1beef1..0a67e8eb9c5 100644 --- a/zul/src/main/resources/web/js/zul/menu/Menuitem.ts +++ b/zul/src/main/resources/web/js/zul/menu/Menuitem.ts @@ -535,7 +535,23 @@ export class Menuitem extends zul.LabelImageWidget implements zul.LabelImageWidg if (!isTopmost && !this._disabled) { if (this.parent) this.parent.removeActive_(); + // remove all active + for (var mi = this.parent?.firstChild; mi != undefined; mi = mi.nextSibling) { + if (mi instanceof Menuitem) { + (mi.$class as typeof Menuitem)._rmActive(mi); + } + if (mi instanceof zul.menu.Menu) { + (mi.$class as typeof zul.menu.Menu)._rmActive(mi); + var pp = mi.menupopup; + if (pp?.isOpen()) { + jq(mi.$n_()).removeClass(mi.$s('hover')).removeClass(mi.$s('selected')); + pp.close(); + } + } + } + // add new active (this.$class as typeof Menuitem)._addActive(this); + this.focus(); } } diff --git a/zul/src/main/resources/web/js/zul/menu/Menupopup.ts b/zul/src/main/resources/web/js/zul/menu/Menupopup.ts index e4950540b00..7e03787f859 100644 --- a/zul/src/main/resources/web/js/zul/menu/Menupopup.ts +++ b/zul/src/main/resources/web/js/zul/menu/Menupopup.ts @@ -367,8 +367,26 @@ export class Menupopup extends zul.wgt.Popup { // UP: 1. jump to the previousSibling item // DOWN: 1. jump to the nextSibling item if (w) (w.$class as typeof zul.menu.Menuitem)._rmActive(w); + // remove all active + for (var mi = this?.firstChild; mi != undefined; mi = mi.nextSibling) { + if (mi instanceof zul.menu.Menuitem) { + (mi.$class as typeof zul.menu.Menuitem)._rmActive(mi); + } + if (mi instanceof zul.menu.Menu) { + (mi.$class as typeof zul.menu.Menu)._rmActive(mi); + var pp = mi.menupopup; + if (pp?.isOpen()) { + jq(mi.$n_()).removeClass(mi.$s('hover')).removeClass(mi.$s('selected')); + pp.close(); + } + } + } + // add new active w = keyCode == 38 ? _prevChild(this, w) : _nextChild(this, w); - if (w) (w.$class as typeof zul.menu.Menuitem)._addActive(w as zul.menu.Menuitem); // FIXME: type of w is inconsistent + if (w) { + (w.$class as typeof zul.menu.Menuitem)._addActive(w as zul.menu.Menuitem); // FIXME: type of w is inconsistent + w.focus(); + } break; case 37: //LEFT // 1. close the contenthandler (like colorbox), if any diff --git a/zul/src/main/resources/web/js/zul/menu/less/menu.less b/zul/src/main/resources/web/js/zul/menu/less/menu.less index 445128cea2e..9459663b263 100644 --- a/zul/src/main/resources/web/js/zul/menu/less/menu.less +++ b/zul/src/main/resources/web/js/zul/menu/less/menu.less @@ -115,12 +115,11 @@ white-space: nowrap; min-height: @menuContentMinHeight; z-index: 20; // the 20 is greater than menupopup-separator's z-index - &:hover { - .contentStyle(@menuItemHoverColor, @menuItemHoverBackground); + .contentStyle(@menuItemHoverColor, @menuItemBackground); } &:focus { - .contentStyle(@menuItemHoverColor, @menuItemHoverBackground); + .contentStyle(@menuItemHoverColor, @menuItemBackground); } &:active { .contentStyle(@menuItemActiveColor, @menuItemActiveBackground); @@ -217,10 +216,10 @@ color: @menuPopupItemColor; background: @menuPopupItemBackground; &:hover { - .contentStyle(@menuPopupItemHoverColor, @menuPopupItemHoverBackground); + .contentStyle(@menuPopupItemHoverColor, @menuPopupItemBackground); } &:focus { - .contentStyle(@menuPopupItemHoverColor, @menuPopupItemHoverBackground); + .contentStyle(@menuPopupItemHoverColor, @menuPopupItemBackground); } &:active { .contentStyle(@menuPopupItemActiveColor, @menuPopupItemActiveBackground);