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)
After manually calling modalName.hide(), sometimes the backdrop will stuck
junior5417 pro answered 5 years ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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