bootstrap.native: Hiding in Modal-events breaks Modal

There is some problem when calling Modal.hide() in the event-listener at least for shown.bs.modal and the Modal is already hidden.

var overwritten = {};
function showModal(modal, notimer) {
    overwritten[modal] = notimer || false;
    if (!modal.Modal) {
        new Modal(modal);
        modal.addEventListener('hide.bs.modal', function (evt) {
            overwritten[modal] = true;
        });
        modal.addEventListener('shown.bs.modal', function (evt) {
            setTimeout(function () {
                if (!overwritten[modal]) {
                    modal.Modal.hide();
                }
            }, 1500);
        });
    }
    modal.Modal.show();
}

Without the workaround with overwritten and the additional event listener for hide.bs.modal, at the next Modal.show(), the dialog shows up very short and will disappear immediately and the body-class stays set. So the UI is broken, because half of the Modal is left and you can not close the Modal anymore. This happens when the Modal got hidden by some other call (e.g. escape key) before and the timeout-function is running and calling Modal.hide() afterwards. There are no JS errors in console. I’ve no tested if the problem is with hiding a hidden Modal or with the timeout-event or both in combination.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 27 (15 by maintainers)

Commits related to this issue

Most upvoted comments

@thednp @jhunschejones I am using the latest release, which is version 2.0.26. I created a example and also video recorded. It is important to note that closing the modal often works perfectly, but in like 30% of the times the Modal bug appears.

bug

@Vuurvlieg solved, check master code.

@thednp

Some previous versions ago this bug did not occur. I think this bug was introduced in https://github.com/thednp/bootstrap.native/issues/266. I believe before this we were using SetTimeout which was working fine for me.

but I will need your help in testing and validating the proposed code changed to come.

No problem. Just let me know when you are ready and I will test as much as needed.