MOBILE-3814 collapsible: Fix collapsible footer scroll change problem

src/core/directives/collapsible-footer.ts

@@ -39,7 +39,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
     protected initialPaddingBottom = '0px';
     protected previousTop = 0;
     protected previousHeight = 0;
-    protected stickTimeout?: number;
+    protected endAnimationTimeout?: number;
     protected content?: HTMLIonContentElement | null;
     protected loadingChangedListener?: CoreEventObserver;
 
@@ -60,6 +60,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
         this.initialHeight = this.element.getBoundingClientRect().height || 48;
         this.previousHeight = this.initialHeight;
 
+        this.content?.style.setProperty('--core-collapsible-footer-max-height', this.initialHeight + 'px');
+
         this.setBarHeight(this.initialHeight);
     }
 
@@ -88,7 +90,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
         this.initialPaddingBottom = this.content.style.getPropertyValue('--padding-bottom') || this.initialPaddingBottom;
         this.content.style.setProperty(
             '--padding-bottom',
-            `calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-height, 0px))`,
+            `calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-max-height, 0px))`,
         );
 
         const scroll = await this.content.getScrollElement();
@@ -143,8 +145,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
      * @param height The new bar height.
      */
     protected setBarHeight(height: number): void {
-        if (this.stickTimeout) {
+        if (this.endAnimationTimeout) {
-            clearTimeout(this.stickTimeout);
+            clearTimeout(this.endAnimationTimeout);
         }
 
         this.element.classList.toggle('footer-collapsed', height <= 0);
@@ -154,12 +156,21 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
 
         if (height > 0 && height < this.initialHeight) {
             // Finish opening or closing the bar.
-            const newHeight = height < this.initialHeight / 2 ? 0 : this.initialHeight;
+            this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(height), 500);
-
-            this.stickTimeout = window.setTimeout(() => this.setBarHeight(newHeight), 500);
         }
     }
 
+    /**
+     * End of animation when not scrolling.
+     *
+     * @param height Last height used.
+     */
+    protected endAnimation(height: number): void {
+        const newHeight = height < this.initialHeight / 2 ? 0 : this.initialHeight;
+
+        this.setBarHeight(newHeight);
+    }
+
     /**
      * @inheritdoc
      */

src/theme/theme.base.scss

@@ -1111,7 +1111,7 @@ ion-fab[core-fab] {
 }
 
 ion-content.has-collapsible-footer ion-fab {
-    bottom: calc(var(--core-navigation-height, 0px) + 10px);
+    bottom: calc(var(--core-collapsible-footer-height, 0px) + 10px);
     @include core-transition(all, 200ms);
 }
 

src/theme/theme.light.scss

@@ -319,7 +319,7 @@
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);
 
-    --core-navigation-height: 48px;
+    --core-collapsible-footer-height: 48px;
     --core-navigation-background: var(--contrast-background);
 
     --core-collapsible-footer-background: var(--contrast-background);