ActionList: Take items with css propery `display:contents / visibilit…

…y:hidden` into account

For example, the elements of icingadb/hostgroup are `display:contents`, which leads to scrollIntoView having no effect
At the moment we don't have `visibility:hidden` elements, but I have included the check to be absolutely sure.

getDirectionalNext(): The condition has been extended to skip items without children or when none of them is visible. This does not skip elements with display:contents.

asset/css/list/list-item.less

@@ -87,3 +87,7 @@
     }
   }
 }
+
+.list-item:nth-child(3) {
+  visibility: hidden;
+}

asset/js/widget/ActionList.js

@@ -321,7 +321,7 @@ define(["../notjQuery"], function ($) {
          * @param item The list item from which we want the next item
          * @param eventKey Pressed key (`ArrowUp` or `ArrowDown`)
          *
-         * @returns {Element|null} Returns the next selectable list item or null if none found (list ends)
+         * @returns {Element|null} Returns the next selectable (has a visible child) list item or null if none found (list ends)
          */
         getDirectionalNext(item, eventKey) {
             if (! item) {
@@ -333,11 +333,34 @@ define(["../notjQuery"], function ($) {
             do {
                 nextItem = eventKey === 'ArrowUp' ? item.previousElementSibling : item.nextElementSibling;
                 item = nextItem;
-            } while (nextItem && ! nextItem.hasAttribute(this.removeBrackets(LIST_ITEM_IDENTIFIER)))
+            } while (
+                nextItem && (
+                    ! nextItem.hasAttribute(this.removeBrackets(LIST_ITEM_IDENTIFIER))
+                    || ! this.isSelectable(nextItem)
+                )
+            )
 
             return nextItem;
         }
 
+        /**
+         * Whether the given item is selectable
+         *
+         * It is selectable if at least one of its children is visible
+         *
+         * @param item
+         * @return bool
+         */
+        isSelectable(item) {
+            for (let child of item.childNodes) {
+                if (child.checkVisibility({visibilityProperty: true, opacityProperty: true})) {
+                    return true;
+                }
+            }
+
+            return false;
+        }
+
         /**
          * Find the list item that should be activated next
          *
@@ -405,11 +428,21 @@ define(["../notjQuery"], function ($) {
          * @param pressedKey Pressed key (`ArrowUp` or `ArrowDown`)
          */
         scrollItemIntoView(item, pressedKey) {
-            item.scrollIntoView({block: "nearest"});
-            let directionalNext = this.getDirectionalNext(item, pressedKey);
+            if  (! item.checkVisibility() && item.firstChild && item.firstChild.checkVisibility()) {
+                // it's a pseudo item: display:contents, because the child is visible
+                item.firstChild.scrollIntoView({block: "nearest"});
+                let directionalNext = this.getDirectionalNext(item, pressedKey);
 
-            if (directionalNext) {
-                directionalNext.scrollIntoView({block: "nearest"});
+                if (directionalNext) {
+                    directionalNext.firstChild.scrollIntoView({block: "nearest"});
+                }
+            } else {
+                item.scrollIntoView({block: "nearest"});
+                let directionalNext = this.getDirectionalNext(item, pressedKey);
+
+                if (directionalNext) {
+                    directionalNext.scrollIntoView({block: "nearest"});
+                }
             }
         }