clicking off modal permanently shuts it

[mgenev]

Whether in the samples project or my own project, when I click off the modal, bootstrap hides it, but then Aurelia can't re-open it, In the past I've solved this issue in Ember by binding the bootstrap event to Ember's action which closes.
https://github.com/mgenev/how-to-sane/blob/master/client/app/pods/components/modal-dialog/component.js#L18-L20

I tried the same in Aurelia, but for some reason I didn't get it to work yet. I'll try again when I get some time on my hands.

[Andreas-Hjortland]

You can use a workaround which is to reset the showing variable to false before you set it to true (in a timeout so that the change listener fires first) in the function you call to show the modal

Markup

<modal showing.bind="showing">
    <modal-header title.bind="title" close.call="closeModal()"></modal-header>
    <modal-body content.bind="path"></modal-body>
    <modal-footer>
        <button class="btn btn-default" click.trigger="closeModal()">Close</button>
    </modal-footer>
</modal>

Script

showModal() {
    // workaround. You need the timeout to ensure that the change function has been called before you change the variable back again.
    this.showing = false;
    setTimeout(() => {
        this.showing = true;
    }, 10);
}

The proper fix would be to add change listeners in the controller (modal.js). I have created a pull request (#17) if you want to check that out. Note that for this fix to work you have to change the <modal showing.bind="..."> with <modal showing.two-way="...">

[plwalters]

@Andreas-Hjortland So the docs need to be updated to close this one correct?

[Andreas-Hjortland]

Yeah, that should be it

[SamDeBlock]

Wouldn't a better fix be to use two way binding like this:
<modal showing.two-way="showing">
(or even make this the default binding)