DOM leak upon closing a tab

asked 2013-02-12 15:39:11 +0800

cvarona
554 ● 1 ● 6

updated 2013-02-27 09:52:34 +0800

Hi,

I have a zul page that acts as a container for several forms, loaded on demand; the form container is a tabbox, and every form is loaded into a tabpanel as requested; when I'm done with it I just close the containing tab by either clicking some button within the tab or the tab's closing X; the latter does not close the form directly, but rather raises the typical "Are you sure" intermediate dialog prior to effectively closing the form. The following constitutes a very simplified demo:

<window title="My First Window" border="normal" width="600px">
    <zscript>
    import org.zkoss.zk.ui.event.*;

    int cnt = 0;

    public class YesNo implements EventListener {

        private Tab _tab;

        public YesNo( Tab tab ) {
            _tab = tab;
        }

        public void onEvent( Event event ) {        
            if( "onYes".equals( event.getName() ) ) {
                _tab.onClose();
            }
        }
    }

    public class AreYouSure implements EventListener {

        private Tab _tab;

        public AreYouSure( Tab tab ) {
            _tab = tab;
        }

        public void onEvent( Event event ) {
            event.stopPropagation();
            Messagebox.show( "Are you sure?", "Beware !", Messagebox.NO | Messagebox.YES, Messagebox.EXCLAMATION, Messagebox.NO, new YesNo( _tab ) );
        }
    }

    public class DirectClose implements EventListener {

        private Tab _tab;

        public DirectClose( Tab tab ) {
            _tab = tab;
        }

        public void onEvent( Event event ) {
            _tab.onClose();
        }
    }

    public void newTab() {

        Tab tab = new Tab( String.valueOf( cnt ) );
        tab.setClosable( true );
        tab.addEventListener( "onClose", new AreYouSure( tab ) );
        tabbox.getTabs().appendChild( tab );

        Tabpanel tabpanel = new Tabpanel();
        Button b = new Button( "Close" );
        b.setParent( tabpanel );
        b.addEventListener( "onClick", new DirectClose( tab ) );

        tabbox.getTabpanels().appendChild( tabpanel );
        cnt++;        
    }
    </zscript>
    <button label="New tab" onClick="newTab();" />
    <tabbox id="tabbox">
        <tabs />
        <tabpanels />
    </tabbox>
</window>

(Since this code contains event listeners defined on the fly I'm afraid it won't be possible to test it by means of the online zk sandbox)

If tried on ie, ff or chrome (zk 6.5.0 or greater), opening tabs and closing then with either the inner close button or the tab's close X will result in some dom nodes being leaked, and they will be related to the widget that ultimately triggers the event that actually closes the tab. For instance, if we close by clicking the inner close button, the chrome profiler shows the following:

whereas if we directly close our tab by clicking its X and then clicking the Yes ("Sí" in my locale) button on the emerging message box:

If we remove the tab's onClose event listener and use the tab's X no detached dom node is to be seen.

With kind regards

César Varona