Toggle - when menu list item check box unchecked must click menu open/close button to close list

[TheWilks]

Info:
I am using only the toggle function of tablesaw.js and have tested this bug with the provided tablesaw toggle demo as to rule out issues with my code.

Bug:

• When you open the list of check boxes and click away from the menu the menu closes as expected.
• When you open the menu and uncheck a menu item then click away from the menu the menu does not close the only way to close the menu now is to click the menu open/close button.

[TheWilks]

Code causing the issue in the "tablesaw.js".

    if( event && $( event.target ).closest( "." + self.classes.popup ).length ) {
            return;
    }

I fixed this issue in my case only by just including this code in my on page JS. Maybe somthing suimiler can be applied to the actual plugin in place of this line.

    $("div.dialog-table-coltoggle.tablesaw-columntoggle-popup").click(function(e) { 
            e.stopPropagation(); 
    });

Maybe something similar can be applied to the "tablesaw.js" to fix the issue in every case.

[jchen1990]

This occurs because when the popup is opened, an event listener listens only once for any click on the document. I ran across this issue as well and made a change to my local copy of the tablesaw library in the closePopup function.

if( event && $( event.target ).closest( "." + self.classes.popup ).length ) {
    //User clicked in the popup, continue listening to document clicks to close popup.
    $( document ).unbind( 'click.' + tableId, closePopup );
    window.clearTimeout( closeTimeout );
    closeTimeout = window.setTimeout(function() {
        $( document ).one( 'click.' + tableId, closePopup );
    }, 15 );
    return;
}

Now, instead of just returning when the event comes from within the popup, I am unbinding and rebinding the click event, essentially resetting the event listener. This code snippet is identical to what is happening in the openPopup function.