diff --git a/.changeset/sixty-impalas-laugh.md b/.changeset/sixty-impalas-laugh.md new file mode 100644 index 0000000000..95d8d26362 --- /dev/null +++ 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 index 372fe275ed..1bc9c6a6a1 100644 --- 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,