Ngx-bootstrap: bug(modal): if backdrop === 'static' outside click should not close modal

[dave-barrineau]

Provided I'm doing this correctly, I've set the modal's config to:

<div bimodal #myModal="bs-modal" class="modal fade" [config]="{ keyboard: false, backdrop: false }" aria-labelledby="myLargeModalLabel" aria-hidden="true"> ... </div>

However this does not prevent the modal from closing when clicking outside of the modal.

[valorkin]

oh, thanks! my bad, I forgot to add check here:
https://github.com/valor-software/ng2-bootstrap/blob/development/components/modal/modal.component.ts#L79
it should be

@HostListener('click', ['$event'])
  protected onClick(event:any):void {
    if (this.config.backdrop === 'static' && event.target === this.element.nativeElement) {
      this.hide(event);
    }
  }

and options values should be added to docs (from original bs docs)
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

Nice reason to make PR :)

[dave-barrineau]

Thanks!

Sent from my iPhone

On Jun 2, 2016, at 6:29 PM, Dmitriy Shekhovtsov [email protected] wrote:

oh, thanks! my bad, I forgot to add check here:
https://github.com/valor-software/ng2-bootstrap/blob/development/components/modal/modal.component.ts#L79
it should be

@HostListener('click', ['$event'])
protected onClick(event:any):void {
if (this.config.backdrop === 'static' && event.target === this.element.nativeElement) {
this.hide(event);
}
}
and options values should be added to docs (from original bs docs)
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

Nice reason to make PR :)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[mpetkov]

Since this is an easy fix, based on the effort tag, is it possible to expedite it?

[mpetkov]

Also, the code is supposed to be:
this.config.backdrop !== 'static'
If it is static, it shouldn't hide the modal when clicked.

[calvinKG]

Hi,

What's the solution for this bug ?

[mpetkov]

@calvinKG - Bug has been fixed, update you version to get the fix.

[eRez-ebs]

hi,
ran into the exact same problem, trying to download the recent version but unsuccesfully.
when i used 'npm install ng2-bootstrap --save' the ng2-bootstarp version in the package.json remained 1.0.17.
when i downloaded ng2-bootstarp-develpoment.zip and replaced the files manually (either those of the modal libarary or the entire folder) i got complation errors.
in both cases the result remained the same - the model was closed when clicking on the background even when i set 'data-backdrop="static"'

can you please help me with that
cheers,
eRez

[mpetkov]

@eRez-ebs - So I am also using 1.0.17. So just passing data-backdrop won't work since that only works for the bootstrap version. To get it to work with this library you have to pass it via the config input like so:

[config]="{'backdrop':'static', 'keyboard': false}"

[eRez-ebs]

@mpetkov thanks for the quick reply.
your solution resolved the ESC issue, which no longer closes the modal, but sadly not the background - clicking on it still closes the modal :-(

[calvinKG]

@mpetkov am also exprinceing the same problem.

"ng2-bootstrap": "^1.0.17", thats the version that am using.

[eRez-ebs]

i found out why it didn't work for me.
i've looked into 'node_modules\ng2-bootstrap\components\modal' folder localy, where there's a 'modal.component.d.ts' file and 'modal.component.js' file.
the d.ts file has only declerations in it, but indside the js file i found this:

/** Host element manipulations */
// @HostBinding(`class.${ClassName.IN}`) private _addClassIn:boolean;
ModalDirective.prototype.onClick = function (event) {
        if (event.target === this.element.nativeElement) {
            this.hide(event);
        }
    };
    // todo: consider preventing default and stopping propagation
    ModalDirective.prototype.onEsc = function () {
        if (this.config.keyboard) {
            this.hide();
        }
    };

doesn't look much like the file here - https://github.com/valor-software/ng2-bootstrap/blob/development/components/modal/modal.component.ts#L79

anyhow, it explains why the onClick fails but the onEsc works.
i simply added to the condition of the onClick this.config.backdrop !== 'static' and it worked (meaning the modal wasn't closed when the background was clicked).
i just can't figure out why after i update bootstrap library i still get an oudated version.

eRez

[calvinKG]

How are we going to implement this updates ?

[ctrl-brk]

[config]="{backdrop: 'static'}" works for me in 1.1.5