Error showing popup modal


Topic: Error showing popup modal

architech pro premium priority asked 6 years ago

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();
    });
}

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?


Please insert min. 20 characters.

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