af:panelTabbed - Issue with displaying a popup on tab switching

I am facing an issue with handling disclosureEvent using clientListener. I am trying to show a Ok/Cancel popup whenever a user navigates away from a tab in panelTabbed.

Below is the code: (This is the exact same code provided on Oracle ADF code corner)

     <af:resource type="javascript">
    function alertTabSwitch(disclosureEvent){
        var tab = disclosureEvent.getSource();           
        if(tab.getDisclosed()==false){

           var popup = tab.findComponent('p1');
           popup.show();
           popup.setProperty("tabToOpen",tab.
           disclosureEvent.cancel();
        }           
    }

    function handlePopupOkCancel(actionEvent){      
        var popupButton = actionEvent.getSource();
        var butPressed = popupButton.getProperty('popupAction'); 
        var dialog = popupButton.getParent();
        var popup  = dialog.getParent();
        if(butPressed == 'OK'){             
            var tabToFindAndFocusOnString = popup.getProperty("tabToOpen");
            if(tabToFindAndFocusOnString.length > 0){
              var tab = AdfPage.PAGE.findComponentByAbsoluteId(tabToFindAndFocusOnString);
              tab.setDisclosed(true);
              actionEvent.cancel();  
              popup.hide();       
            }
        }
        else{
            //close popup and stay on page
            actionEvent.cancel();    
            popup.hide();               
        }
    }
</af:resource>





<af:panelStretchLayout id="psl1">
    <f:facet name="center">
        <af:panelTabbed id="pt1">
            <af:showDetailItem text="TAB 1" id="sdi1" disclosed="true" stretchChildren="first"
                               clientComponent="false">

                               First Tab
                <af:clientListener method="alertTabSwitch" type="disclosure"/>
               </af:showDetailItem>
            <af:showDetailItem text="TAB 2" id="sdi2" stretchChildren="first" clientComponent="false">
            Second Tab
            <af:clientListener method="alertTabSwitch" type="disclosure"/>
               </af:showDetailItem>
        </af:panelTabbed>
        <!-- id="af_one_column_stretched"   -->
    </f:facet>
    <f:facet name="start">
        <af:popup childCreation="deferred" autoCancel="disabled" id="p1" clientComponent="true"
                  contentDelivery="immediate">
            <af:dialog id="d1" title="Tab Switch Alert" type="none">
                <f:facet name="buttonBar">
                    <af:panelGroupLayout id="g1">
                        <af:commandButton text="OK" id="cb1" partialSubmit="true">
                            <af:clientAttribute name="popupAction" value="OK"/>
                            <af:clientListener method="handlePopupOkCancel" type="action"/>
                        </af:commandButton>
                        <af:commandButton text="CANCEL" id="cb2" partialSubmit="true">
                             <af:clientAttribute name="popupAction" value="CANCEL"/>
                            <af:clientListener method="handlePopupOkCancel" type="action"/>
                        </af:commandButton>
                    </af:panelGroupLayout>
                </f:facet>
                <af:outputText value="Do you really want to switch tabs?" id="ot1"
                               inlineStyle="font-size:medium; color:Red;"/>
            </af:dialog>
            <af:clientAttribute name="tabToOpen" value=""/>
        </af:popup>
    </f:facet>
</af:panelStretchLayout>

Everything is being done on the client side. When I click on a tab, first the 'Unselect' event is fired for the selected tab and the disclosed value of that tab changes to false. After the value is changed, the listener is invoked. So in the javascript, the same tab is disclosed again after clicking on OK button. Had the value not changed before invoking the af:clientListener, this problem wouldn't have occured.

Can anybody help me with this?

I have described the problem more thoroughly here. https://forums.oracle.com/message/11227277#11227277

Regards, Navaneet

Change the tag to the following and it'll work, this was tested against 11.1.1.7

<af:resource type="javascript">

var theTabToClose;
var theTabToOpen;
function alertTabSwitch(disclosureEvent){
    var tab = disclosureEvent.getSource();   //This is the tab to close
    if(tab.getDisclosed()==false){
       theTabToClose = tab;
       theTabToOpen = disclosureEvent.getDisclosureCounterpart();
       var popup = tab.findComponent('p1');
       disclosureEvent.cancel();
       popup.show();
    }            
}

function handlePopupOkCancel(actionEvent){      
    var popupButton = actionEvent.getSource();
    var butPressed = popupButton.getProperty('popupAction'); 
    var dialog = popupButton.getParent();
    var popup  = dialog.getParent();

    if(butPressed == 'OK'){     
        theTabToOpen.setDisclosed(true);
    }else{
        theTabToClose.setDisclosed(true);
    }
        actionEvent.cancel();
        popup.hide();
}
</af:resource>