From 41abd758c8a44c6e2a248d7237385bf85442bb57 Mon Sep 17 00:00:00 2001 From: "Ahmad K. Bawaneh" Date: Sun, 26 Jan 2025 15:52:01 +0300 Subject: [PATCH] fix #997 Make Row Stay Selected When Row Menu is Opened --- .../plugins/menu/RowContextMenuPlugin.java | 1 + .../org/dominokit/domino/ui/menu/Menu.java | 37 ++++++++++++++++++- .../dominokit/domino/ui/menu/MenuStyles.java | 2 + .../dui-components/domino-ui-datatable.css | 6 +++ 4 files changed, 45 insertions(+), 1 deletion(-) diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/menu/RowContextMenuPlugin.java b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/menu/RowContextMenuPlugin.java index 8f69eff9a..99e785b91 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/menu/RowContextMenuPlugin.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/menu/RowContextMenuPlugin.java @@ -39,6 +39,7 @@ public class RowContextMenuPlugin implements DataTablePlugin { */ public RowContextMenuPlugin(Menu menu) { this.menu = menu; + this.menu.setCloseOnScroll(true); } /** diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/Menu.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/Menu.java index 84ab232fb..5b09775da 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/Menu.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/Menu.java @@ -113,6 +113,7 @@ public class Menu extends BaseDominoElement> private final LazyChild menuFooter; private final LazyChild createMissingElement; private final LazyChild backIcon; + private final EventListener closeOnScrollListener; private LazyChild noResultElement; protected DivElement menuElement; @@ -174,6 +175,10 @@ public class Menu extends BaseDominoElement> targets.get(elementOf(Js.uncheckedCast(evt.target)).getDominoId()); } if (!Objects.equals(newTarget, lastTarget)) { + if (nonNull(lastTarget)) { + lastTarget.getTargetElement().removeCss(dui_context_menu_target_open); + } + newTarget.getTargetElement().addCss(dui_context_menu_target_open); getSelection().forEach(item -> item.deselect(true)); } @@ -218,6 +223,21 @@ public Menu() { searchBox = LazyChild.of(SearchBox.create().addCss(dui_menu_search_box), menuSearchContainer); backArrowContainer = div().addCss(dui_order_first, dui_menu_back_icon); init(this); + closeOnScrollListener = evt -> close(); + + onAttached( + (target, mutationRecord) -> { + if (isCloseOnScroll()) { + window.addEventListener("scroll", closeOnScrollListener, true); + } + }); + + onDetached( + (target, mutationRecord) -> { + if (isCloseOnScroll()) { + window.removeEventListener("scroll", closeOnScrollListener, true); + } + }); windowResizeListener = evt -> position(); nowAndWhenAttached( @@ -1436,6 +1456,7 @@ public void open(boolean focus) { if (isDropDown() && openMenuCondition.check(this)) { if (getTarget().isPresent()) { DominoElement targetElement = getTarget().get().getTargetElement(); + targetElement.addCss(dui_context_menu_target_open); if (!(targetElement.isReadOnly() || targetElement.isDisabled())) { doOpen(focus); } @@ -1672,6 +1693,7 @@ public Menu close() { .ifPresent( menuTarget -> { menuTarget.getTargetElement().element().focus(); + menuTarget.getTargetElement().removeCss(dui_context_menu_target_open); }); if (isSearchable()) { searchBox.get().clearSearch(); @@ -1781,7 +1803,7 @@ public Menu setContextMenu(boolean contextMenu) { * Applies the appropriate event listeners to the target element based on whether the menu is a * context menu or not. * - * @param menuTarget The target menu to which the listeners should be applied. + * @param menuTarget The target menu to which the listeners should bce applied. */ private void applyTargetListeners(MenuTarget menuTarget) { if (isContextMenu()) { @@ -2003,6 +2025,19 @@ public Menu setCloseOnBlur(boolean closeOnBlur) { return this; } + public Menu setCloseOnScroll(boolean closeOnScroll) { + if (!closeOnScroll) { + window.removeEventListener("scroll", closeOnScrollListener); + } + setAttribute("d-close-on-scroll", closeOnScroll); + return this; + } + + private boolean isCloseOnScroll() { + return hasAttribute("d-close-on-scroll") + && "true".equalsIgnoreCase(getAttribute("d-close-on-scroll")); + } + /** * @return boolean true if the selection style should be preserved after the menu item loses the * selection focus, otherwise false. diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/MenuStyles.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/MenuStyles.java index 0861fd416..50e504e9a 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/MenuStyles.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/MenuStyles.java @@ -53,4 +53,6 @@ public interface MenuStyles { CssClass dui_menu_item_content = () -> "dui-menu-item-content"; CssClass dui_menu_item_bottom = () -> "dui-menu-item-bottom"; CssClass dui_context_menu = () -> "dui-context-menu"; + + CssClass dui_context_menu_target_open = () -> "dui-context-menu-target-open"; } diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css index b70c40984..e8cb83c6c 100644 --- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css +++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css @@ -48,6 +48,12 @@ background-color: var(--dui-datatable-row-hover-bg-color); } +.dui-datatable-row.dui-context-menu-target-open:not(.dui-datatable-row-editable), +.dui-datatable-row.dui-context-menu-target-open:nth-child(odd):not(.dui-datatable-row-editable), +.dui-datatable-row.dui-context-menu-target-open:nth-child(even):not(.dui-datatable-row-editable) { + background-color: var(--dui-datatable-row-hover-bg-color); +} + .dui-datatable-responsive:not(.dui-datatable-striped) tbody .dui-datatable-row { background-color:var(--dui-bg-clr, var(--dui-bg, var(--dui-clr-dominant))); }