0

DOM leak upon closing a tab

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

cvarona gravatar image 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:

close button's detached node

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:

messagebox' yes button detached node

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

delete flag offensive retag edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
3 followers

RSS

Stats

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

Seen: 22 times

Last updated: Feb 27 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More