dialog: An anchor tag in dialog-body causes infinite loop

I’m submitting a bug report

Library Version: 1.0.0-rc.1.0.1

Please tell us about your environment: Windows 10

Node Version: 6.10.0
NPM Version: 4.0.5
Webpack webpack 2.4.1
Browser: chrome
Language: TypeScript 2.3

Current behavior: Dialog goes into recurisve loop and terminates with a stackoverflow exception when there is an anchor tag in the dialog body

Expected/desired behavior: Using this view:

    <ux-dialog>
        <ux-dialog-header>
            <h2>
                Send forespørsel om time
            </h2>
        </ux-dialog-header>
        <ux-dialog-body>

            <button click.trigger="modifyDate()">Works fine</button>
            
            <!-- removing this line, and everything works fine -->
            <a href="#">Trubble</a>
            

        </ux-dialog-body>
        <ux-dialog-footer>
            <button click.trigger="controller.cancel()">Cancel</button>
            <button click.trigger="controller.ok()">Ok</button>
        </ux-dialog-footer>
    </ux-dialog>


// my model
import { DialogController } from 'aurelia-dialog';
@autoinject
export class RequestDialogNew {
    constructor(private controller: DialogController, private stateService: StateService) {
        // console.log("a", this.controller, this.stateService); // will be printed a few hundred times (stack trace not usable)
    }
}

// I'm lanching the dialog using this code
import { RequestDialogNew } from './../request-dialog/request-dialog';
// ...
 this.dialogService.open({
            viewModel: RequestDialogNew,
            model: toShow,
            lock: false
        });```

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 44 (13 by maintainers)

Most upvoted comments

The cause of this problem is identified but not fixed… It’s currently tracked by aurelia/templating#549.

The workarounds above should work, though. The culprit is the following pattern:

// DON'T
import { MyDialog } from 'dialogs/whatever';
dialogService.open({ viewModel: MyDialog });

// DO
dialogService.open({ viewModel: PLATFORM.moduleName('dialogs/whatever') });

// ...or at least combine them into:
import { MyDialog } from 'dialogs/whatever';
PLATFORM.moduleName('dialogs/whatever');
dialogService.open({ viewModel: MyDialog });

Independently of this bug, more problems have arisen when using the first pattern with Webpack. For example it’s not compatible with the new Webpack 3 ModuleConcatenationPlugin and it might also break with webpack DllPlugin.

Bottom line: when using Webpack, always use moduleName on your dialog viewmodels, avoid importing them with ES import.

jods4 on Sep 6, 2017

I see that you are using webpack, and already used PLATFORM.moduleName on the path, you can use the moduleId

import {ACLEditor} from 'core/acl/acl-editor';
PLATFORM.moduleName('core/acl/acl-editor', 'core');
...
this.dialogService.open({
            viewModel: 'core/acl/acl-editor',
            model: {
                ...
            },
        });

bigopon on Apr 20, 2018

Hey folks, just to let you know: I’ve just moved a project over to webpack, based on the latest skeleton and ran into this bug. The workarounds described above work, but I still run into the stackoverflow exception described above, as long as I have any <a>-tag in the modal.

So I’ll comment them out for the moment, but is there still no workaround / solution for this?

Xceno on Sep 6, 2017