From 320cf443eb0a9aa536a36f2adb1b46564412c2bd Mon Sep 17 00:00:00 2001
From: LawyZheng <lawyzheng1106@gmail.com>
Date: Tue, 3 Sep 2024 10:54:11 +0800
Subject: [PATCH] subscribe element classname change (#766)

---
 skyvern/webeye/scraper/domUtils.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/skyvern/webeye/scraper/domUtils.js b/skyvern/webeye/scraper/domUtils.js
index f68e084e..db4f5dfc 100644
--- a/skyvern/webeye/scraper/domUtils.js
+++ b/skyvern/webeye/scraper/domUtils.js
@@ -1637,6 +1637,11 @@ if (window.globalDomDepthMap === undefined) {
   window.globalDomDepthMap = new Map();
 }
 
+function isClassNameIncludesHidden(className) {
+  // some hidden elements are with the classname like `class="select-items select-hide"`
+  return className.includes("hide");
+}
+
 function addIncrementalNodeToMap(parentNode, childrenNode) {
   // calculate the depth of targetNode element for sorting
   const depth = getElementDomDepth(parentNode);
@@ -1676,10 +1681,23 @@ if (window.globalObserverForDOMIncrement === undefined) {
             addIncrementalNodeToMap(node, [node]);
           }
         }
-
-        // TODO: we maybe need to detect the visiblity change from class
-        // if (mutation.attributeName === "class") {
-        // }
+        if (mutation.attributeName === "class") {
+          node = mutation.target;
+          if (
+            !mutation.oldValue ||
+            !isClassNameIncludesHidden(mutation.oldValue)
+          )
+            continue;
+          const newStyle = window.getComputedStyle(node);
+          const newDisplay = newStyle.display;
+          if (newDisplay !== "none") {
+            window.globalOneTimeIncrementElements.push({
+              targetNode: node,
+              newNodes: [node],
+            });
+            addIncrementalNodeToMap(node, [node]);
+          }
+        }
       }
 
       if (mutation.type === "childList") {