Skip to content

fix(modal): consider scrollable content while dragging when expandToScroll is false #30257

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.

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

Merged
merged 6 commits into from
Mar 18, 2025
Merged
Changes from all commits
Commits
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
24 changes: 21 additions & 3 deletions core/src/components/modal/gestures/sheet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -264,11 +264,16 @@ export const createSheetGesture = (

const onMove = (detail: GestureDetail) => {
/**
* If `expandToScroll` is disabled, we should not allow the swipe gesture
* to continue if the gesture is not pulling down.
* If `expandToScroll` is disabled, and an upwards swipe gesture is done within
* the scrollable content, we should not allow the swipe gesture to continue.
*/
if (!expandToScroll && detail.deltaY <= 0) {
return;
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
const scrollEl =
contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
if (scrollEl) {
return;
}
}

/**
Expand Down Expand Up @@ -324,6 +329,19 @@ export const createSheetGesture = (
};

const onEnd = (detail: GestureDetail) => {
/**
* If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
* function to be called if the user is trying to swipe content upwards and the content
* is not scrolled to the top.
*/
if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) {
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement)!;
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
if (scrollEl!.scrollTop > 0) {
return;
}
}

/**
* When the gesture releases, we need to determine
* the closest breakpoint to snap to.
Expand Down
Loading