[BUG] Pane won't scroll if it was hidden in an overflow position

[derek90]

Describe the bug
When I open a pane, and scroll its content to the bottom or nearly the bottom of it, and then hide the pane with the hide() method, next time I open the pane again (which will be keep the scroll in the previous position) won't let me scroll the content, until I use the draggable element and drag it a little bit. I fix it setting the scrollTop property of the pane parent div that wraps it to zero. That so, the pane will open at the top of the scroll of its content next time, but at least it will allow the user to scroll its content

To Reproduce
Steps to reproduce the behavior:

1. Open a pane with a content that exceeds the pane maximum height
2. Scroll the pane content to the bottom and click something in it that will fire the pane .hide() method (the pane component has a reference to the CupertinoPane instance)
3. open the Pane again and try to scroll its content. You won't be able to do it until you use the top of the pane and drag it a little bit in any direction (it's not necessary to change the pane breakpoint position)

Expected behavior
Once a pane is hidden using the hide() method, after open the pane again, the user should be able to see the pane scroll content where it left, and be able to continue scrolling it

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

Smartphone (please complete the following information):

• Device: Google Pixel XL
• OS: Android 10
• Browser: Chrome

Additional context
These are my pane settings:

    let settings: CupertinoSettings = { 
      parentElement: 'ion-app',
      buttonClose: false,
      backdrop: true,
      bottomClose: true,
      breaks: {
        top: { enabled: true, height: this.platform.height() },
        middle: { enabled: true, height: this.platform.height()/2 }
      },
      onBackdropTap: () => {
        this.selectCurrencyPane.hide();
      }
    };

I'm using the last release of the plugin (1.2.5)

[derek90]

I just checked and the bug happens when the pane reaches the middle breakpoint, having its content scrolled down to the bottom or nearly the bottom:

1. Open the pane (which will be open in the middle breakpoint position)
2. Drag it to top breakpoint position
3. scroll the pane content to the bottom (the inside content of the pane, not the pane itself)
4. Drag the pane to the middle position. Now, the pane content scroll is stuck. You can drag the pane to the top position by dragging from the pane content and it will keep stuck even in the top position, until you drag the pane by the draggable element just a little bit (keeping the pane in the top position)

[roman-rr]

@derek90 by default, middle position set overflow to hidden. And scroll not available on middle breakpoint. Unless you implement this featured example https://output.jsbin.com/piwecad

But the other questions i have:

• how you drag pane to bottom with scroll > 0 ? By draggable element ?
• Issue exist if you restore pane from hidden state to top breakpoint ?

[derek90]

@roman-rr I'm not dragging the pane to bottom, just the pane inside content to bottom (at top position breakpoint).
I know that I cannot scroll the pane content in the middle breakpoint position, but returning to the top breakpoint position will keep the scroll stuck, not allowing me to scroll the pane content in the top breakpoint position. It allows me to scroll again once I use the draggable element and drag it a little bit down (just, keeping the pane in the current position)

[roman-rr]

@derek90 Ok i got it. I will check restore from hidden mode, but meanwhile you can try additionally call .setOverflowHeight() and/or .checkOverflowAttr() when pane is restored and see if that helps!

this.pane.moveToBreak('top');
this.pane.setOverflowHeight();
this.pane.checkOverflowAttr();

[derek90]

The issue is not when restoring the pane from hidden mode. You can try opening a pane with a long scroll content to the pane top breakpoint, then scroll the content al the way down while the pane still being in the top breakpoint. After that, with the pane content scrolled down, drag the pane to the middle position, and now, try to drag it from the pane content back to the top position. It will make like a jump (no animation transition) and you will find that the scroll got stuck. Once there, it will only let you drag the content again if you drag the pane from the draggable element a little bit, without changing the pane breakpoint

[roman-rr]

@derek90 Thank you for details, i will check soon.

[roman-rr]

@derek90 fixed and will be available on 1.2.6