Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixing incorrect scroll to element obscured by sticky element #8047

Merged
merged 8 commits into from
Nov 10, 2023
Merged

fixing incorrect scroll to element obscured by sticky element #8047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31e1c6a
update scroll
PavelMor25 Oct 19, 2023
329b379
update workflow
PavelMor25 Oct 19, 2023
c444ba2
merge
PavelMor25 Oct 23, 2023
96a2cd3
update scroll
PavelMor25 Oct 19, 2023
7adaccb
update test and scroll action
PavelMor25 Oct 23, 2023
59d8192
typo correction
PavelMor25 Oct 23, 2023
e30da51
rename test
PavelMor25 Oct 23, 2023
3d06055
Merge branch 'DevExpress:master' into gh-7377
PavelMor25 Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/client/core/scroll/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>> {
Expand Down
4 changes: 4 additions & 0 deletions src/client/core/utils/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
35 changes: 35 additions & 0 deletions test/functional/fixtures/regression/gh-7377/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
AlexKamaev marked this conversation as resolved.
Show resolved Hide resolved

<footer class="sticky-footer">
<button> save </button>
</footer>
</form>
</body>
</html>
5 changes: 5 additions & 0 deletions test/functional/fixtures/regression/gh-7377/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/');
});
});
12 changes: 12 additions & 0 deletions test/functional/fixtures/regression/gh-7377/testcafe-fixtures/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
Loading