Trigger touchActive and mouseDown on flush

rrweb-io · Mar 28, 2023 · b65163a · b65163a
1 parent 7834b85
commit b65163a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/.changeset/sixty-impalas-laugh.md b/.changeset/sixty-impalas-laugh.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Only apply touch-active styling on flush
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
@@ -148,6 +148,7 @@ export class Replayer {
 
   private mousePos: mouseMovePos | null = null;
   private touchActive: boolean | null = null;
+  private lastMouseDownEvent: [Node, Event] | null = null;
 
   // Keep the rootNode of the last hovered element. So  when hovering a new element, we can remove the last hovered element's :hover style.
   private lastHoveredRootNode: Document | ShadowRoot;
@@ -299,6 +300,20 @@ export class Replayer {
         );
         this.mousePos = null;
       }
+
+      if (this.touchActive === true) {
+        this.mouse.classList.add('touch-active');
+      } else if (this.touchActive === false) {
+        this.mouse.classList.remove('touch-active');
+      }
+      this.touchActive = null;
+
+      if (this.lastMouseDownEvent) {
+        const [target, event] = this.lastMouseDownEvent;
+        target.dispatchEvent(event);
+      }
+      this.lastMouseDownEvent = null;
+
       if (this.lastSelectionData) {
         this.applySelection(this.lastSelectionData);
         this.lastSelectionData = null;
@@ -614,12 +629,6 @@ export class Replayer {
       const castFn = this.getCastFn(event, true);
       castFn();
     }
-    if (this.touchActive === true) {
-      this.mouse.classList.add('touch-active');
-    } else if (this.touchActive === false) {
-      this.mouse.classList.remove('touch-active');
-    }
-    this.touchActive = null;
   };
 
   private getCastFn = (event: eventWithTime, isSync = false) => {
@@ -1145,6 +1154,11 @@ export class Replayer {
               } else if (d.type === MouseInteractions.TouchEnd) {
                 this.touchActive = false;
               }
+              if (d.type === MouseInteractions.MouseDown) {
+                this.lastMouseDownEvent = [target, event];
+              } else if (d.type === MouseInteractions.MouseUp) {
+                this.lastMouseDownEvent = null;
+              }
               this.mousePos = {
                 x: d.x,
                 y: d.y,