Skip to content

Commit 68be8e9

Browse files
authored
fix(modal): consider scrollable content while dragging when expandToScroll is false (#30257)
Issue number: internal --------- ## What is the current behavior? Changes introduced by #30235 caused two major issues: - Animations were not being played when increasing breakpoints. - When the scrollable content was at the top, and a big scroll to the bottom of the list was made, the modal would jump to a higher breakpoint. ## What is the new behavior? - When `expandToScroll` is false, the swipe gesture is allowed unless it's a pull down within scrollable content. - When `expandToScroll` is false, we cancel the `moveSheetToBreakpoint` when a scroll to top is being done within the scrollable content ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before | After | |--------|-------| | <video src="https://github.com/user-attachments/assets/e1c22f48-f990-45cf-a6c4-1aec0d019c6d"> | <video src="https://github.com/user-attachments/assets/f01e0480-748f-40af-ac11-94f790f0e197"> |
1 parent d36283e commit 68be8e9

File tree

1 file changed

+21
-3
lines changed
  • core/src/components/modal/gestures

1 file changed

+21
-3
lines changed

core/src/components/modal/gestures/sheet.ts

+21-3
Original file line numberDiff line numberDiff line change
@@ -264,11 +264,16 @@ export const createSheetGesture = (
264264

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

274279
/**
@@ -324,6 +329,19 @@ export const createSheetGesture = (
324329
};
325330

326331
const onEnd = (detail: GestureDetail) => {
332+
/**
333+
* If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
334+
* function to be called if the user is trying to swipe content upwards and the content
335+
* is not scrolled to the top.
336+
*/
337+
if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) {
338+
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement)!;
339+
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
340+
if (scrollEl!.scrollTop > 0) {
341+
return;
342+
}
343+
}
344+
327345
/**
328346
* When the gesture releases, we need to determine
329347
* the closest breakpoint to snap to.

0 commit comments

Comments
 (0)