fix #997 Make Row Stay Selected When Row Menu is Opened

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/menu/RowContextMenuPlugin.java

@@ -39,6 +39,7 @@ public class RowContextMenuPlugin<T> implements DataTablePlugin<T> {
    */
   public RowContextMenuPlugin(Menu<?> menu) {
     this.menu = menu;
+    this.menu.setCloseOnScroll(true);
   }
 
   /**

domino-ui/src/main/java/org/dominokit/domino/ui/menu/Menu.java

@@ -113,6 +113,7 @@ public class Menu<V> extends BaseDominoElement<HTMLDivElement, Menu<V>>
   private final LazyChild<DivElement> menuFooter;
   private final LazyChild<AnchorElement> createMissingElement;
   private final LazyChild<MdiIcon> backIcon;
+  private final EventListener closeOnScrollListener;
   private LazyChild<LIElement> noResultElement;
   protected DivElement menuElement;
 
@@ -174,6 +175,10 @@ public class Menu<V> extends BaseDominoElement<HTMLDivElement, Menu<V>>
               targets.get(elementOf(Js.<HTMLElement>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<Element> targetElement = getTarget().get().getTargetElement();
+        targetElement.addCss(dui_context_menu_target_open);
         if (!(targetElement.isReadOnly() || targetElement.isDisabled())) {
           doOpen(focus);
         }
@@ -1672,6 +1693,7 @@ public Menu<V> 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<V> 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<V> setCloseOnBlur(boolean closeOnBlur) {
     return this;
   }
 
+  public Menu<V> 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.

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";
 }

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)));
 }