Topic: Modal Backdrop stuck

junior5417 pro asked 5 years ago


Resources (screenshots, code snippets etc.)

ERROR TypeError: Cannot read property 'backdrop' of undefined
at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.showBackdrop (ng-uikit-pro-standard.js:6758)
at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.show (ng-uikit-pro-standard.js:6592)
at SafeSubscriber._next (pop-up-dynamic-content.component.ts:22)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at ReplaySubject.push../node_modules/rxjs/_esm5/internal/ReplaySubject.js.ReplaySubject._subscribe (ReplaySubject.js:67)
at ReplaySubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
at ReplaySubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:89)

enter image description hereAfter manually calling modalName.hide(), sometimes the backdrop will stuck


junior5417 pro answered 5 years ago


Hi @Damian Gemza

I just sent you the reproduction application via email.


Damian Gemza staff commented 5 years ago

I have answered in your email. Please take a look at the inbox.

Best Regards,

Damian


Damian Gemza staff answered 5 years ago


Dear @junior5417

Still, I'm not able to reproduce this problem. I have tried on Firefox@Ubuntu, Chrome@Ubuntu, Chrome@Mac Mojave (emulator) - hiding modal both from the backdrop and hide button, and there's no such error.

Could you please send me your app, or simple reproduction application via email? You can find me here: d.gemza@mdbootstrap.com

Best Regards,

Damian


junior5417 pro answered 5 years ago


You can reproduce the problems by using the code below:

<div mdbModal #newStorePopup="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" [config]="{keyboard: false}"
  style="overflow: auto">
  <div class="modal-dialog modal-notify" role="document">
    <div class="modal-content">

    </div>
  </div>
</div>

and after calling newStorePopup.hide() to close the pop up. Error below will happens and the overlay will be stuck. :(

ERROR TypeError: Cannot read property 'backdrop' of undefined
    at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.showBackdrop (ng-uikit-pro-standard.js:6758)
    at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.show (ng-uikit-pro-standard.js:6592)
    at SafeSubscriber._next (pop-up-campaign-info.component.ts:34)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at ReplaySubject.push../node_modules/rxjs/_esm5/internal/ReplaySubject.js.ReplaySubject._subscribe (ReplaySubject.js:67)
    at ReplaySubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at ReplaySubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:89)

Damian Gemza staff answered 5 years ago


Could you please tell me, how can I reproduce this problem with errors in console?

Without reproduction steps, I'm not able to help you with your problem.

Best Regards,

Damian


junior5417 pro answered 5 years ago


It just a normal modal popup component. and the chances of this case happen is by random. All modal with backdrop will get this problem.

<div mdbModal #newStorePopup="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" [config]="{ignoreBackdropClick: true, keyboard: false}"
  style="overflow: auto">
  <div class="modal-dialog modal-notify" role="document">
    <div class="modal-content">

    </div>
  </div>
</div>

Damian Gemza staff answered 5 years ago


Dear @junior5417

It would be great if you could provide us with some code with which we can reproduce your problem.

Without it, it will be difficult to help you well.

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.4
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No