fix: Improve detection of programmatic scrolls to avoid unintended di…

…sabling of auto scrolling (cypress-io#29574) * fix: Improve detection of programmatic scrolls to avoid unintended disabling of auto scrolling * Fix changelog --------- Co-authored-by: Cacie Prins <[email protected]> Co-authored-by: Jennifer Shehane <[email protected]>
MikeMcC399 · Jun 11, 2024 · 33272fb · 33272fb
1 parent 5c3a8dc
commit 33272fb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -5,10 +5,11 @@ _Released 6/18/2024 (PENDING)_
 
 **Features:**
 
-- Adds Component Testing support for Angular version 18. Addresses [#29309](https://github.com/cypress-io/cypress/issues/29309).
+- Added Component Testing support for Angular version 18. Addresses [#29309](https://github.com/cypress-io/cypress/issues/29309).
 
 **Bugfixes:**
 
+- Fixed an issue where auto scrolling the reporter would sometimes be disabled without the user's intent. Fixes [#25084](https://github.com/cypress-io/cypress/issues/25084).
 - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203).
 - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603).
 - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865).

diff --git a/packages/reporter/cypress/e2e/unit/scroller.cy.ts b/packages/reporter/cypress/e2e/unit/scroller.cy.ts
@@ -156,6 +156,9 @@ describe('scroller', () => {
 
       scroller.setContainer(container, onUserScroll)
       scroller.scrollIntoView(getElement({ offsetTop: 600 }))
+      scroller.scrollIntoView(getElement({ offsetTop: 600 }))
+      clock.tick(16)
+      container.addEventListener.callArg(1)
       clock.tick(16)
       container.addEventListener.callArg(1)
       clock.tick(16)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
@@ -21,14 +21,12 @@ const SCROLL_THRESHOLD_MS = 50
 export class Scroller {
   private _container: Element | null = null
   private _userScrollCount = 0
-  private _userScroll = true
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
 
-    this._userScroll = true
     this._userScrollCount = 0
 
     this._listenToScrolls(onUserScroll)
@@ -38,16 +36,15 @@ export class Scroller {
     if (!this._container) return
 
     this._container.addEventListener('scroll', () => {
-      if (!this._userScroll) {
-        // programmatic scroll
-        this._userScroll = true
+      this._userScrollCount++
 
+      if (this._userScrollCount <= 0) {
+        // programmatic scroll
         return
       }
 
       // there can be false positives for user scrolls, so make sure we get 3
       // or more scroll events within 50ms to count it as a user intending to scroll
-      this._userScrollCount++
       if (this._userScrollCount >= 3) {
         if (onUserScroll) {
           onUserScroll()
@@ -87,7 +84,7 @@ export class Scroller {
       scrollTopGoal = 0
     }
 
-    this._userScroll = false
+    this._userScrollCount--
     this._container.scrollTop = scrollTopGoal
   }
 
@@ -127,7 +124,6 @@ export class Scroller {
   // for testing purposes
   __reset () {
     this._container = null
-    this._userScroll = true
     this._userScrollCount = 0
     clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined