No Scrolling in Angular2 App with Vex Plugin after modal.confirm().open()

[pcwa-ahendricks]

IMPORTANT: Please provide a sample using:

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? bug

• What is the current behavior? Having an issue where I lose the ability to scroll in my Angular2 application when using the Vex modal plugin. However, using the same confirm() method works as expected when using the Bootstrap plugin, in other words, the problem seems specific to the Vex Plugin. I only lose scrolling in my application when the resultPromise resolves, in other words, the user clicks the Okay button. When the Cancel button is pressed, and the resultPromise gets rejected, the scrolling works fine. There are no error messages in the console when the scrolling becomes unavailable. My canDeactivate guard looks like this:

return this.modal
      .confirm()
      .message('Are you sure you want to leave this page?')
      // .className('default')
      .okBtn('Yes')
      .cancelBtn('Stay')
      .open()
      .then((resultPromise) => {
        return (<Promise<boolean>>resultPromise.result)
          .then((response) => response)
          .catch(() => false);
      });

Any ideas?

• What is the expected behavior? Scrolling throughout application, regardless of modal promise

• Please tell us about your environment:

• Angular version: 2.2.3
• Browser: [all]

[shlomiassaf]

The demo app does not have this issue.

It's difficult to assess the issue without proper reproduction.

Please provide a plunker so I can review the steps leading to the issue.

Thank you.

[zkorz]

I know this is not extremely helpful because I cannot produce it consistently, but my application is also losing scrolling after the user presses "OK". It seems to happen very sporadically and maybe when I'm trying to scroll immediately after pressing OK or when my computer is thinking hard / slowing down for some reason (not sure if there's a direct connection).

The scrolling returns if I click a button to open a new modal and then click cancel.

I am using the Bootstrap plugin so it's not just for the VEX. If I manage to be able to produce it consistently I will provide code.

I am using Angular 2.4.0 and 2.0.1 of angular2-modal.

[altschuler]

I have this issue as well. It's happens when closing the modal takes a while (>1 second). In my case I'm doing some heavy work that takes a while to finish.

The culprit is that animationEnd$ never completes (https://github.com/shlomiassaf/angular2-modal/blob/master/src/lib/plugins/vex/modal.ts#L91) and thus the vex-open class on body is never removed, leaving the page without scrolling.

I couldn't figure out why the animation never ends, but I'm guessing it has to do with a timing issue.

I did a dirty workaround by manually removing vex-open from body when the modal closes.

[zkorz]

You hit it spot on @altschuler . I ran a long loop inside my "success" function and the scrolling stopped every time. Mine was intermittent because it occasionally took a long time. I am using the Bootstrap and the following line at the end of my success function fixed it:

document.body.classList.remove('modal-open')

I'm hoping that doesn't have unintended consequences.

[mckinleymedia]

I had the same problem. This fixed it for me, too. Thanks!

[Przemyslaw-Marchewka]

The same situation in my app. I had to remove modal-open from body. Thanks! Nevertheless this is nasty workaround. Is this going to be fixed ?

[qwe852147]

I have same problem . It will be fixed?

[zerocewl]

Same problem here. Workaround works: document.body.classList.remove('modal-open')

[spottedmahn]

same problem here. I'm navigating away on close and it happens everytime

this.modal.alert()
    .size('sm')
    .title('My Title')
    .body('Completed')
    .open()
    .then(dialog => dialog.result)
    .then(result => {
        //return to grid
        this.router.navigateByUrl('adminHome');
    })
    //this happens if the user closes by not clicking ok
    .catch(err => {
        //return to grid
        this.router.navigateByUrl('adminHome');
    });

[altschuler]

Issue seems to be gone with version 3.0.1

[celsomtrindade]

Not for me. Still running into the same problem, where the body keeps the class modal-open. The solution to hard remove the class using document.body will work, but everywhere I have a modal I have to create a .then() just to run this code.