feat (tracker-assist): 3.5.11: RemoteControl: better scroll element detection; maintain react tight state input value

tracker/tracker-assist/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker-assist",
   "description": "Tracker plugin for screen assistance through the WebRTC",
-  "version": "3.5.10",
+  "version": "3.5.11",
   "keywords": [
     "WebRTC",
     "assistance",

tracker/tracker-assist/src/Assist.ts

@@ -173,6 +173,12 @@ export default class Assist {
     socket.on("scroll", remoteControl.scroll)
     socket.on("click", remoteControl.click)
     socket.on("move", remoteControl.move)
+    socket.on("focus", (clientID, nodeID) => {
+      const el = app.nodes.getNode(nodeID)
+      if (el instanceof HTMLElement) {
+        remoteControl.focus(clientID, el)
+      }
+    })
     socket.on("input", remoteControl.input)
 
     let annot: AnnotationCanvas | null = null

tracker/tracker-assist/src/Mouse.ts

@@ -65,6 +65,7 @@ export default class Mouse {
     const [dX, dY] = delta
 
     let el = this.lastScrEl
+
     // Scroll the same one 
     if (el instanceof Element) {
       el.scrollLeft += dX
@@ -81,17 +82,28 @@ export default class Mouse {
       mouseY-this.pScrEl.scrollTop,
     )
     while (el) {
-      //if(el.scrollWidth > el.clientWidth)  // - This check doesn't work in common case
-      const esl = el.scrollLeft
-      el.scrollLeft += dX
-      const est = el.scrollTop
-      el.scrollTop += dY
-      if (esl !== el.scrollLeft || est !== el.scrollTop) {
-        this.lastScrEl = el
-        return
-      } else {
-        el = el.parentElement
-      }   
+      // const esl = el.scrollLeft
+      // el.scrollLeft += dX
+      // const est = el.scrollTop
+      // el.scrollTop += dY
+      // if (esl !== el.scrollLeft || est !== el.scrollTop) { // doesn't work if the scroll-behavior is "smooth"
+      //   this.lastScrEl = el
+      //   return
+      // } else {
+      //   el = el.parentElement
+      // }   
+      
+      // el.scrollTopMax > 0 // available in firefox
+      if (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth) { 
+        const styles = getComputedStyle(el)
+        if (styles.overflow.indexOf("scroll") >= 0 || styles.overflow.indexOf("auto") >= 0) {
+          el.scrollLeft += dX
+          el.scrollTop += dY
+          this.lastScrEl = el
+          return
+        }
+      }
+      el = el.parentElement
     }
 
     // If not scrolled

tracker/tracker-assist/src/RemoteControl.ts

@@ -9,6 +9,14 @@ enum RCStatus {
   Enabled,
 }
 
+
+let setInputValue = function(this: HTMLInputElement | HTMLTextAreaElement,  value: string) { this.value = value }
+const nativeInputValueDescriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")
+if (nativeInputValueDescriptor && nativeInputValueDescriptor.set) {
+  setInputValue = nativeInputValueDescriptor.set
+}
+
+
 export default class RemoteControl {
   private mouse: Mouse | null
   private status: RCStatus = RCStatus.Disabled
@@ -77,11 +85,16 @@ export default class RemoteControl {
     if (id !== this.agentID || !this.mouse) { return }
     this.focused = this.mouse.click(xy) 
   }
-  input = (id, value) => {
+  focus = (id, el: HTMLElement) => {
+    this.focused = el
+  }
+  input = (id, value: string) => {
     if (id !== this.agentID || !this.mouse || !this.focused) { return }
     if (this.focused instanceof HTMLTextAreaElement 
       || this.focused instanceof HTMLInputElement) {
-      this.focused.value = value
+      setInputValue.call(this.focused, value)
+      const ev = new Event('input', { bubbles: true})
+      this.focused.dispatchEvent(ev)
     } else if (this.focused.isContentEditable) {
       this.focused.innerText = value
     }