Close Button On Dialog Does Not Function After 2nd Time Showing Modal

[malinowskie]

I am having an issue getting the modal to close using the Close Button, after opening and closing the modal.

jsFiddle: https://jsfiddle.net/xah28zfp/

Any ideas?

[tiesont]

If I had to hazard a guess, I'd assume the event we bind to the close button gets unbound when the dialog is closed, and since the dialog might not be getting disposed of properly, the button isn't rebound on subsequent calls to the dialog function. Not sure, though.

It doesn't happen with the code from this gist, https://gist.github.com/tiesont/ffeb904d55e7203c77376d35edd2c304, which I threw out there as a work-in-progress, in this fiddle, https://jsfiddle.net/9egd5kt3/, which uses that code. If you can try updating your fiddle to use that code and let me know if it still happens, I'd appreciate it. Otherwise, I'll try to find some time later (can't say when - I've about used up my spare time for today, at this point).

[malinowskie]

It only works if bootbox is called from within the button click handler. (Is my usage incorrect?)
jsFiddle: https://jsfiddle.net/v19u37nw/3/

let dialog = bootbox.dialog({
    animate: false,
    title: "Group Name",
    message: "message",
    size: "small",
    closeButton: true,
    show: false
  });

$("#test").click(() => {
	// BROKEN
  dialog.modal('show');
});

$("#test2").click(() => {
	// WORKING
  let dialog = bootbox.dialog({
    animate: false,
    title: "Group Name",
    message: "message",
    size: "small",
    closeButton: true,
    show: true
  });
});

[tiesont]

For your "working" example, the dialog is scoped to the click event, so every single time, you're dealing with a new dialog object. The "broken" example is re-using the dialog object, which is probably a problem with respect to how we create the modal. I'm not sure if @makeusabrew ever intended dialogs to be reused like that.

[malinowskie]

After taking a closer look, it seems as though the dialog is being broken down after it is hidden. It might be worth adding a configuration option as follows:

options.isDialogReusable: boolean; // false can be default, true can be up to user

then modifying the following:

    // Bootstrap event listeners; these handle extra
    // setup & teardown required after the underlying
    // modal has performed certain actions.

    // make sure we unbind any listeners once the dialog has definitively been dismissed
      dialog.one('hide.bs.modal', function (e) {
        if (e.target === this && !options.isDialogReusable) {
          dialog.off('escape.close.bb');
          dialog.off('click');
        }
    });

    dialog.one('hidden.bs.modal', function (e) {
      // ensure we don't accidentally intercept hidden events triggered
      // by children of the current dialog. We shouldn't need to handle this anymore, 
      // now that Bootstrap namespaces its events, but still worth doing.
      if (e.target === this && !options.isDialogReusable) {
        dialog.remove();
      }
    });

[tiesont]

@malinowskie You're probably correct - as you noted, we're removing the dialog when it's hidden. If you don't mind, I think everything after "...adding a configuration option as follows:" is worth moving to a new feature request issue. Can't promise it'd be implemented, but might be worth thinking about. @tarlepp your thoughts?

[tiesont]

@malinowskie I know it's been a bit, but I finally had some time to look into this. I think a relatively small change (basically what you proposed, but with a simpler option name) seems to work. Here's a fiddle with the update, if you want to check it out: https://jsfiddle.net/8dLr7epq/

[malinowskie]

The JS Fiddle seems to be malfunctioning, but after adjusting the msgbx with reusable: true everything worked as I would expect.

var msgbx = bootbox.alert({ 
	message: 'Showing!',
        show: false,
        reusable: true
});

[tiesont]

@malinowskie No, that was my mistake. I thought the fiddle I was sending had the reusable flag set. So, with the default option (reusable: false), the close button wouldn't work more than once, since the dialog isn't supposed to be reused. When reusable: true is set, the close button would work each time, since we don't remove the handlers.

[kstan79]

hi, is this fix ready in current master? Im using bootbox dialog in my project, I wish to perform some validation before dialog close, if validation fail it return false and keep the dialog. It have same issue when 2nd close attemp it not trigger close event

[tiesont]

@kstan79 No, it isn't. I haven't had time to write tests for this option yet, which needs to be done before this gets pulled in. If you really want the feature now, this gist has the code from the working fiddle above: https://gist.github.com/tiesont/95766bc5d9b08890eba5ec3ac531aa5f