fix findAncestorByAttribute so that it also checks shadow-doms

Author: JesmoDev

packages/uui-base/lib/utils/findAncestorByAttributeValue.ts

@@ -1,30 +1,40 @@
 /**
  * Recursively find an ancestor element by attribute name and value. This also checks children of the ancestor.
  * @func findAncestorByAttributeValue
- * @param {HTMLElement} element - Origin element of the search.
+ * @param {HTMLElement} startNode - Origin node of the search.
  * @param {string} attributeName - Name of the attribute to search for.
  * @param {string} attributeValue - Value of the attribute to search for.
  */
 export const findAncestorByAttributeValue = (
-  element: HTMLElement,
+  startNode: HTMLElement | ParentNode,
   attributeName: string,
   attributeValue: string
-) => {
-  while (element !== null && element.parentElement !== null) {
-    element = element.parentElement;
+): HTMLElement | null => {
+  let currentNode: typeof startNode | null = startNode;
 
+  while (currentNode !== null) {
+    // Check if the current element has the specified attribute
     const elementHasAttribute =
-      element.hasAttribute(attributeName) &&
-      element.getAttribute(attributeName) === attributeValue;
+      currentNode instanceof HTMLElement &&
+      currentNode.hasAttribute(attributeName) &&
+      currentNode.getAttribute(attributeName) === attributeValue;
+
+    // Check if the current element contains an element with the specified attribute
     const elementContainsAttribute =
-      element.querySelector(`[${attributeName}="${attributeValue}"]`) !== null;
+      currentNode.querySelector(`[${attributeName}="${attributeValue}"]`) !==
+      null;
+
     if (elementHasAttribute) {
-      return element;
+      return currentNode as HTMLElement; // Found a matching ancestor
     } else if (elementContainsAttribute) {
-      return element.querySelector(
+      return currentNode.querySelector(
         `[${attributeName}="${attributeValue}"]`
-      ) as HTMLElement;
+      ) as HTMLElement; // Found a matching ancestor
     }
+
+    // Move up the DOM tree to the parent or parentNode, whichever is available
+    currentNode = currentNode.parentElement || currentNode.parentNode || null;
   }
-  return null;
+
+  return null; // No matching ancestor found
 };