[RM] Bug Fix 'react-custom-scrollbar' event handling when report is opened in iframe.
Register mouse events in topmost window (not in iframe window).
@@ -82,6 +82,7 @@ export default class HeatmapScrollbar extends React.Component<HeatmapScrollbarPr
<div {...props} className="heatmap-scrollbar-track" style={{ ...style, width: SCROLLBAR_TRACK_WIDTH }} />
}
onScroll={onScroll}
+ onScrollStart={this.onScrollStart}
ref={this.scrollbar}
>
<div className="heatmap-wrapper">
@@ -102,4 +103,23 @@ export default class HeatmapScrollbar extends React.Component<HeatmapScrollbarPr
</div>
)
}
+
+ private onScrollStart = () => {
+ // 'react-custom-scrollbars library is using document.addEventListenter('mouseup', ...) to handle user's LMB release,
+ // but it doesn't work when scrollbars displayed in iframe and user releases LMB out of iframe window.
+ // https://github.com/malte-wessel/react-custom-scrollbars/blob/b353cc4956d6154d6a100f34c3a6202c75434186/src/Scrollbars/index.js#L328
+ // Using 'top.window.document' instead of 'document' to handle mouse events can be a solution.
+
+ // Also, we need 'ts-ignore' here because type declarations for this library doesn't allow us to access private properties.
+ // @ts-ignore
+ if (this.scrollbar.current.dragging) {
+ top.window.document.addEventListener('mouseup', this.onMouseUp);
+ }
+ }
+
+ private onMouseUp = () => {
+ // @ts-ignore
+ this.scrollbar.current.handleDragEnd();
+ top.window.document.removeEventListener('mouseup', this.onMouseUp);
+ }
}
