fixing incorrect scroll to element obscured by sticky element (#8047)

## Purpose Actions doesn't scroll correctly to element behind a sticky element ## Approach Added function which check element on property sticky. Made refactor in scroll action ## References [issue 7377](#7377) ## Pre-Merge TODO - [x] Write tests for your proposed changes - [x] Make sure that existing tests do not fail
DevExpress · Nov 10, 2023 · 21b44a0 · 21b44a0
1 parent 4d14d66
commit 21b44a0
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 5 deletions.
diff --git a/src/client/core/scroll/index.ts b/src/client/core/scroll/index.ts
@@ -266,8 +266,14 @@ export default class ScrollAutomation {
             .then(() => this._scrollWasPerformed);
     }
 
-    private static _getFixedAncestorOrSelf (element: Element): Node | null {
-        return domUtils.findParent(element, true, styleUtils.isFixedElement);
+    private static _getPinnedElementAncestorOrSelf (element: Element, styleUtilsMethod: Function): Node | null {
+        return domUtils.findParent(element, true, styleUtilsMethod);
+    }
+
+    private _isTargetElementObscuredInPointByElement (element: Element, styleUtilsMethod: Function): boolean {
+        const pinnedElement = ScrollAutomation._getPinnedElementAncestorOrSelf(element, styleUtilsMethod);
+
+        return !!pinnedElement && !pinnedElement.contains(this._element);
     }
 
     private _isTargetElementObscuredInPoint (point: AxisValues<number>): boolean {
@@ -276,9 +282,8 @@ export default class ScrollAutomation {
         if (!elementInPoint)
             return false;
 
-        const fixedElement = ScrollAutomation._getFixedAncestorOrSelf(elementInPoint);
-
-        return !!fixedElement && !fixedElement.contains(this._element);
+        return this._isTargetElementObscuredInPointByElement(elementInPoint, styleUtils.isFixedElement) ||
+            this._isTargetElementObscuredInPointByElement(elementInPoint, styleUtils.isStickyElement);
     }
 
     public run (): Promise<boolean | Dictionary<any>> {

diff --git a/src/client/core/utils/style.js b/src/client/core/utils/style.js
@@ -79,3 +79,7 @@ export function hasDimensions (el) {
 export function isFixedElement (node) {
     return domUtils.isElementNode(node) && styleUtils.get(node, 'position') === 'fixed';
 }
+
+export function isStickyElement (node) {
+    return domUtils.isElementNode(node) && styleUtils.get(node, 'position') === 'sticky';
+}
diff --git a/test/functional/fixtures/regression/gh-7377/pages/index.html b/test/functional/fixtures/regression/gh-7377/pages/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>
+    <style>
+    .spacer {
+      height: 100vh;
+    }
+
+    .sticky-footer {
+        position: sticky;
+        bottom: 0;
+        background: #fff;
+        border-top: 2px solid #e9ecef;
+        padding: 1.5rem 0.25rem;
+        background-color: #2c59859c;
+    }
+    </style>
+    <form>
+        <section>
+          <header class="spacer">Section A</header>
+          <br><br>
+          <div class="field">
+            <div id="input"><label>Input</label> <input type="text"></div>
+          </div>
+        </section>
+
+        <footer class="sticky-footer">
+          <button> save </button>
+        </footer>
+    </form>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-7377/test.js b/test/functional/fixtures/regression/gh-7377/test.js
@@ -0,0 +1,5 @@
+describe('[Regression](GH-7377)', () => {
+    it('Should scroll element higher than sticky footer and type text in element', async () => {
+        return runTests('./testcafe-fixtures/');
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-7377/testcafe-fixtures/index.js b/test/functional/fixtures/regression/gh-7377/testcafe-fixtures/index.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture `fixture`
+    .page `http://localhost:3000/fixtures/regression/gh-7377/pages/index.html`;
+
+const input = Selector('#input').find('input');
+
+
+test('Should scroll to the input and enter text into it', async (t) => {
+    await t.typeText(input, 'test');
+    await t.expect(input.value).eql('test');
+});