Merge pull request #763 from RohitR311/cursor-fix

fix: cursor clicks on input text fields

server/src/browser-management/inputHandlers.ts

@@ -636,13 +636,40 @@ const handleClickAction = async (
     const { selector, url, elementInfo, coordinates, isSPA = false } = data;
     const currentUrl = page.url();
 
-    await page.click(selector);
+    if (elementInfo && coordinates && (elementInfo.tagName === 'INPUT' || elementInfo.tagName === 'TEXTAREA')) {
+      try {
+        const elementHandle = await page.$(selector);
+        if (elementHandle) {
+          const boundingBox = await elementHandle.boundingBox();
+          if (boundingBox) {
+            await page.mouse.click(
+              boundingBox.x + coordinates.x, 
+              boundingBox.y + coordinates.y
+            );
+          } else {
+            await page.click(selector);
+          }
+        } else {
+          await page.click(selector);
+        }
+      } catch (error: any) {
+        logger.log("warn", `Failed to click at coordinates: ${error.message}`);
+        await page.click(selector);
+      }
+    } else {
+      await page.click(selector);
+    }
 
     const generator = activeBrowser.generator;
     await generator.onDOMClickAction(page, data);
 
     logger.log("debug", `Click action processed: ${selector}`);
 
+    if (elementInfo && (elementInfo.tagName === 'INPUT' || elementInfo.tagName === 'TEXTAREA')) {
+      logger.log("debug", `Input field click - skipping DOM snapshot for smooth typing`);
+      return;
+    }
+
     if (isSPA) {
       logger.log("debug", `SPA interaction detected for selector: ${selector}`);
 

src/components/recorder/DOMBrowserRenderer.tsx

@@ -572,10 +572,22 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
             }
           }
 
-          if (
+          if (elementInfo?.tagName === "INPUT" || elementInfo?.tagName === "TEXTAREA") {
-            elementInfo?.tagName !== "INPUT" &&
+            const element = target as HTMLElement;
-            elementInfo?.tagName !== "SELECT"
+            const elementRect = element.getBoundingClientRect();
-          ) {
+            const relativeX = iframeX - elementRect.left;
+            const relativeY = iframeY - elementRect.top;
+            
+            socket.emit("dom:click", {
+              selector,
+              url: snapshot.baseUrl,
+              userId: user?.id || "unknown",
+              elementInfo,
+              coordinates: { x: relativeX, y: relativeY },
+              isSPA: false,
+            });
+          } else if (elementInfo?.tagName !== "SELECT") {
+            // Handle other elements normally
             socket.emit("dom:click", {
               selector,
               url: snapshot.baseUrl,