Topic: Error showing popup modal
Expected behavior No errors Actual behavior Opening modal programaticaly creates an error in console and modal is not functional. Closing modal makes rest of the application non responsive.
Resources (screenshots, code snippets etc.) Console error
ERROR Error: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
Error: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (platform-browser.js:1112)
at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.addClass (animations.js:239)
at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (core.js:24320)
at ModalContainerComponent.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalContainerComponent.updateContainerClass (ng-uikit-pro-standard.js:7209)
at ModalContainerComponent.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalContainerComponent.ngOnInit (ng-uikit-pro-standard.js:7190)
at checkAndUpdateDirectiveInline (core.js:22099)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)
at resolvePromise (zone.js:852)
at new ZoneAwarePromise (zone.js:934)
at push../src/app/components/feed/feed-tumblr-item/feed-tumblr-item.component.ts.__awaiter (feed-tab-feed-tab-module.js:336)
at FeedTumblrItemComponent.push../src/app/components/feed/feed-tumblr-item/feed-tumblr-item.component.ts.FeedTumblrItemComponent.showShareModal (feed-tumblr-item.component.ts:108)
at Object.eval [as handleEvent] (FeedTumblrItemComponent.html:77)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
Creating modal
async showShareModal() {
Log.debug('show modal');
this.modalRef = this.modalService.show(ShareToBlogComponent, {
backdrop: true,
keyboard: true,
focus: true,
show: false,
ignoreBackdropClick: false,
class: 'modal-dialog-scrollable modal-full-height modal-right opacity80 ',
containerClass: ' right',
animated: true,
data: this.feedItem
});
const that = this;
this.modalRef.content.close.subscribe(close => {
if (close) {
this.modalRef.hide;
}
});
this.modalRef.content.action.subscribe(res => {
this.loaderSrv.createLoader('publishing post...');
Log.debug('modal result ', res);
if (isArray(res)) {
res.forEach(blog => {
Log.debug('adding post', that.feedItem, blog);
that.blogPostSrv
.addFeedItemToBlog(that.feedItem, blog.id)
.then(published => {
Log.debug('published item ', published);
this.toastCtrl.success('Published to blog ');
this.modalRef.hide();
this.loaderSrv.dismiss();
})
.catch(error => {
this.toastCtrl.error(error);
this.loaderSrv.dismiss();
}).finally( () => {
this.loaderSrv.dismiss();
});
});
}
}, error => {
Log.error('Error subscribing to event ', error);
this.loaderSrv.dismiss();
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.5.1
- Device: desktop
- Browser: Chrome
- OS: win
- Provided sample code: No
- Provided link: No
Related topics
Arkadiusz Idzikowski staff commented 6 years ago
Can you check if this error still occur if you remove the extra space after 'opacity80' class in modal options?