Skip to content

Commit cdc649b

Browse files
committed
fix(modal): improve sheet footer positioning during gestures
1 parent 6232653 commit cdc649b

File tree

1 file changed

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

1 file changed

+19
-3
lines changed

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,13 @@ export const createSheetGesture = (
179179
// sheet has been moved below the footer. When that happens, we need to swap
180180
// the position back so it will collapse correctly.
181181
cachedFooterYPosition = absoluteTop;
182+
// If there's a toolbar, we need to combine the toolbar height with the footer position
183+
// because the toolbar moves with the drag handle, so when it starts overlapping the footer,
184+
// we need to account for that.
185+
const toolbar = baseEl.querySelector('ion-toolbar') as HTMLIonToolbarElement | null;
186+
if (toolbar) {
187+
cachedFooterYPosition -= toolbar.clientHeight;
188+
}
182189

183190
document.body.appendChild(cachedFooterEl);
184191
}
@@ -500,11 +507,13 @@ export const createSheetGesture = (
500507
}
501508

502509
/**
503-
* If expandToScroll is disabled, we need to swap
510+
* If expandToScroll is disabled and we're animating
511+
* to the close of the sheet, we need to swap
504512
* the footer position to stationary so that it
505-
* will act as it would by default
513+
* will collapse correctly. We cannot just always swap
514+
* here or it'll be jittery while animating movement.
506515
*/
507-
if (!expandToScroll) {
516+
if (!expandToScroll && snapToBreakpoint === 0) {
508517
swapFooterPosition('stationary');
509518
}
510519

@@ -513,6 +522,13 @@ export const createSheetGesture = (
513522
.onFinish(
514523
() => {
515524
if (shouldRemainOpen) {
525+
/**
526+
* If expandToScroll is disabled, we need to swap
527+
* the footer position to stationary so that it
528+
* will act as it would by default
529+
*/
530+
swapFooterPosition('stationary');
531+
516532
/**
517533
* Once the snapping animation completes,
518534
* we need to reset the animation to go

0 commit comments

Comments
 (0)