-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(range): disable scroll when range is being dragged (#29241)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There are a few tests that were disabled due to being flaky from gestures. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> While fixing the tests, I found a bug that the scroll was never being disabled on scroll. Additionally, we were not taking into account that a custom scroll target could be used so it was never disabled either. - Fixed the flaky tests. - Content doesn't scroll when range is being dragged. - Content can be either `ion-content` or a custom scroll target. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Preview for `ion-content`](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll) [Preview for custom scroll target](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll-target) How to test: 1. Open either of the previews 2. Render the screen with the device simulator from the browser 3. Verify that you can scroll the page 4. Drag the range but don't let go 5. Verify that you cannot scroll the page 6. Repeat steps 2-5 with the other preview
- Loading branch information
Showing
5 changed files
with
186 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<!DOCTYPE html> | ||
<html lang="en" dir="ltr"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<title>Range - Scroll</title> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" | ||
/> | ||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" /> | ||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" /> | ||
<script src="../../../../../scripts/testing/scripts.js"></script> | ||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> | ||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> | ||
</head> | ||
<body> | ||
<ion-app> | ||
<ion-header> | ||
<ion-toolbar> | ||
<ion-title>Range - Scroll</ion-title> | ||
</ion-toolbar> | ||
</ion-header> | ||
|
||
<ion-content class="ion-padding"> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. Nam | ||
nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat libero id, | ||
feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl convallis | ||
maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget lobortis finibus, | ||
lectus lorem maximus purus, quis sagittis tortor sem sed tellus. | ||
</p> | ||
|
||
<ion-range value="40"> | ||
<div slot="label">Range Label</div> | ||
<ion-label slot="start">Start</ion-label> | ||
<ion-label slot="end">End</ion-label> | ||
</ion-range> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. Nam | ||
nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat libero id, | ||
feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl convallis | ||
maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget lobortis finibus, | ||
lectus lorem maximus purus, quis sagittis tortor sem sed tellus. | ||
</p> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. Nam | ||
nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat libero id, | ||
feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl convallis | ||
maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget lobortis finibus, | ||
lectus lorem maximus purus, quis sagittis tortor sem sed tellus. | ||
</p> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. Nam | ||
nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat libero id, | ||
feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl convallis | ||
maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget lobortis finibus, | ||
lectus lorem maximus purus, quis sagittis tortor sem sed tellus. | ||
</p> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. Nam | ||
nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat libero id, | ||
feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl convallis | ||
maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget lobortis finibus, | ||
lectus lorem maximus purus, quis sagittis tortor sem sed tellus.! | ||
</p> | ||
</ion-content> | ||
</ion-app> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { expect } from '@playwright/test'; | ||
import { configs, dragElementBy, test } from '@utils/test/playwright'; | ||
|
||
/** | ||
* This behavior does not vary across modes/directions. | ||
*/ | ||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { | ||
test.describe(title('range: scroll'), () => { | ||
test('should not scroll when the knob is being dragged', async ({ page, skip }) => { | ||
/** | ||
* The Playwright team has stated that they will not implement this feature: | ||
* https://github.com/microsoft/playwright/issues/28755 | ||
*/ | ||
skip.browser('webkit', 'mouse.wheel is not available in WebKit'); | ||
|
||
/** | ||
* Requires padding to prevent the knob from being clipped. | ||
* If it's clipped, then the value might be one off. | ||
* For example, if the knob is clipped on the right, then the value | ||
* will be 99 instead of 100. | ||
* | ||
* The ion-content is also required to be taller than the viewport | ||
* to allow for scrolling. | ||
*/ | ||
await page.goto(`/src/components/range/test/scroll`, config); | ||
|
||
const rangeEl = page.locator('ion-range'); | ||
const scrollEl = page.locator('ion-content .inner-scroll'); | ||
|
||
expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); | ||
|
||
await dragElementBy(rangeEl, page, 100, 0, undefined, undefined, false); | ||
|
||
/** | ||
* Do not use scrollToBottom() or other scrolling methods | ||
* on ion-content as those will update the scroll position. | ||
* Setting scrollTop still works even with overflow-y: hidden. | ||
* However, simulating a user gesture should not scroll the content. | ||
*/ | ||
await page.mouse.wheel(0, 100); | ||
await page.waitForChanges(); | ||
|
||
expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); | ||
}); | ||
}); | ||
}); |