[BUG] disableDrag() disables all click events

[tsungweihsu]

Describe the bug
This bug only occurs when the pane is at bottom position following the change of break points and disableDrag().
There are originally three break points, namely 'top', 'middle', 'button' enabled. Through a trigger, the break points are set to have only 'middle' enabled and the rest are disabled through setBreakpoints(). Visually, the pane jumps to the middle position. disableDrag() is then triggered from the event onTransitionEnd initiated by the jump from setBreakpoints(). The elements in the pane are non-clickable afterwards but the pane can still be scrolled but not draggable.

Troubleshooting already done

1. only starting with position 'bottom', the bug occurs. When the pane is at 'top' or 'middle' position following the same consecutive setBreakpoints() and onTransitionEnd -> disableDrag(), the bug does not occur, the elements are still clickable.
2. when injecting a wait time of 5 seconds (example) before disableDrag()
   (setBreakpoints() -> onTransitionEnd -> 5 seconds wait time -> disableDrag())
   the elements are still clickable after setBreakpoints() but non-clickable after disableDrag(). Strange thing is when an element is clicked during the wait time, after executing disableDrag(), the elements are still clickable. However, when no mouse events are given during the wait time, after executing disableDrag(), the elements are non-clickable.

To Reproduce
Steps to reproduce the behavior:

1. pane is at bottom position
2. change break points, disable 'top' and 'bottom' with only 'middle' enabled through setBreakpoints()
3. disable dragging through disableDrag()
4. elements in the pane are non-clickable

Expected behavior
Click events should still be able to fire.

Smartphone:

• OS: Android, iOS
• Version Android Oreo, iOS 14.4
• Device: all iPhone and Android devices

[roman-rr]

@tsungweihsu Thank you for issue. Seem's that need make an enhancement. If i correct understand, you must be able to click on buttons inside pane, even if pane with non-draggable state ?
Could you please provide a short video ?

[tsungweihsu]

@roman-rr Thanks for your quick rely, really appreciate it.

Yes, it would be nice if buttons are still interactable . But is it actually by default that buttons are not clickable when the pane is in non-draggable state? Because buttons are actually still clickable when the pane is non-draggable in some cases, namely starting from position 'top' or 'middle'. Please see the video below.

bug.mp4

1. The first demo shows starting from position 'middle' and changing to an other breakpoint setting which only contains 'middle' break point but with a higher height. That's why the pane jumps to the top when switching.
2. The second starts from the position 'top'.
3. The last starts from the position 'bottom', which later disables clicks totally.

Start from:

top: {enabled: true, height: this.platform.height(), bounce: false},
middle: {enabled: true, height: 350, bounce: false},
bottom: {enabled: true, height: 120}

To:

top: {enabled: false},
middle: {enabled: true, height: this.platform.height(), bounce: false},
bottom: {enabled: false}

[roman-rr]

@tsungweihsu i assume that you are using react. But let's try to reproduce first with pure js.
https://output.jsbin.com/rizerun

1. pane is at bottom position
2. change break points by clicking to Change breakpoints
3. Wait few seconds and click Disable drag
4. Click show alert

As you can see, button clickable. I miss somethings ?

[tsungweihsu]

@roman-rr thanks for trying to reproduce the issue

could you try changing breakpoints and disabling drag at the same time or execute them without clicking?
Because as I mention about the strange thing above (second point in Troubleshooting): when a button is clicked before executing disableDrag(), the buttons will still be clickable even after disableDrag() is executed. Buttons are not clickable, only when setBreakpoints() and disableDrag() are proceeded without any mouse events between them. In your example, user already clicks a button before disableDrag().

Maybe you could change the code a bit to check if it can be reproduced? Thank you in advance 🙂

[tsungweihsu]

@roman-rr

I've played with your code a bit directly on jsbin and successfully reproduced the issue but with some small changes:

var isChanged = false;
var drawer = new CupertinoPane('ion-drawer', { 
  initialBreak: 'middle',
  buttonClose: false,
  handleKeyboard: false,
  onTransitionEnd: event => {
    if(isChanged){
      drawer.disableDrag();
    }
  }
});

drawer.setBreakpoints({
  top: {enabled: true, height: window.innerHeight, bounce: false},
  middle: {enabled: true, height: 350, bounce: false},
  bottom: {enabled: true, height: 120}
});
setTimeout(() => drawer.present({animate: true}));

async function changeBreakpoints() {
  this.isChanged = true;
  drawer.setBreakpoints({
    top: {enabled: false},
    middle: {enabled: true, height: window.innerHeight, bounce: false},
    bottom: {enabled: false}
  });
};

async function enableDrag() {
  drawer.enableDrag(); 
}

async function showAlert(num) {
  alert('Alert ' + num);
}

How to trigger the issue:

1. click on changeBreakpoints() button, the pane jumps to the top and the drag is disabled
2. click on enableDrag() button (changed from your disableDrag()), the pane is draggable
3. pull the pane down and release it, the pane jumps to the top
4. buttons are no longer clickable

I think the issue is caused by onTransitionEnd() with disableDrag() together.

[roman-rr]

@tsungweihsu thank you for details. I found the reason and made a fix. Will be available in few days with 1.2.6.