I Would appreciate an update on this, too... I need to open a reveal sometimes with escOnClose:true, other times with escOnClose:false...

With Foundation 6.4.3, you have to :
1. Re-Init the Abide plugin for the Form containing the dynamically created fields, like this :
Foundation.reInit($('form#TheFormContainingAddedFields'));
2. Then, you need to Re-Bind the 'forminvalid.zf.abide' and 'formvalid.zf.abide' events if you have such ones, like this :
$('form#TheFormContainingAddedFields')
.on('forminvalid.zf.abide', function(e){
alert('invalid');
})
.on('formvalid.zf.abide', function(e){
alert('valid');
});
 

If you need to manually expand all the parents of the Active submenu, you can use this code (tested with Foundation 6.4.3) :
$('.menu.vertical.accordion-menu[data-accordion-menu] .is-submenu-item.is-accordion-submenu-item > a.current').parents().find('.is-accordion-submenu-parent > a').trigger('click');

Thanks to the @Will Fairhurst answser, it is possible to achieve the desired result : Thanks !
Example :
<div class="row">
<div class="column small-12 medium-shrink">
ICON
</div>
<div class="column small-12 medium-expand">
<h1>TITLE</h1>
</div>
</div>

Hi,
I have opened a pull request on this topic : https://github.com/zurb/foundation-sites/pull/9896

I hope this component will manage the overflow-y property, in order to remain sticky, because that's such a pain having to put a huuuuge quantity of javascript hacks into it, to get the actual ViewPort ScrollTop, move the offcanvas, and listen for this on every Dom scroll event.. So let's wait and see the new one ! Hope the docs on zurb website will be...well...documented !

+1 Rafi Bankual :-)

Hi again Brian,

Your code fixed a little bug that I had, like a charm !

As an explanation, my problem was that when I activated the stored tab from my variable (stored_variable_tabToActivate), sometimes the tab content of the previous tab was still displayed. :-/
So I was obliged to create a "poor-quality fix" (not considering the "aria" properties, but only dealing with the "is-active" class :

$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Your code was helpful to "PROPERLY reset" the "aria-hidden" property, the "aria-selected" property and the "is-active" class on Dropdown close, this way :

   $(document).bind("hide.zf.dropdownmenu", function() {
      $(".tabs-title").removeClass('is-active').find('[role="tab"]').attr({'aria-selected':'false'});
      $(".tabs-panel").removeClass('is-active').attr({'aria-hidden':'true'});
      //I've commented this line, as I already manage to select the tab another way
      //$("#example-vert-tabs").foundation('selectTab',"panel1v");
    });

Doing so is much more clean, and the Good consequence is that I was able to get rid of my "pooooor fix", and finally comment it, like this :

//$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Thanks again Brian ! I'm always digging deeper in the .JS source files of foundation to get some documentation, but sometimes, my fixes are not so good... you helped me to manage it in a cleaner way ! :-)

I sincerely wish you a very good new 2016 year !

Hi Brian,

Your solution is interesting; I'll try to implement it quickly.
In the meantime, I've managed another way (but perhaps not only an elegant one) to basically store the active tab in a variable (stored_variable_tabToActivate) once it a tab is clicked with this code :

   $(document).on("change.zf.tabs", function(ev){
    //get the clicked tab
    var this_ClickedTab = ev.currentTarget.activeElement;

    //if not empty
    if(this_TabOpenerDOMObject.hash){
      //Store clicked tab in variable
      stored_variable_tabToActivate = (this_ClickedTab.hash).replace("#","");
    }
  });

Then, on "show.zf.dropdownmenu", I activate this Tab with something like :

  $(document).on("show.zf.dropdownmenu", function(ev){
    //Get the ID of the clicked DropDown button
    var this_DropDownOpenerDOMObject = ev.currentTarget.activeElement;
    if( (this_DropDownOpenerDOMObject.id) == "account-opener-1" ){
      var TabObject = new Foundation.Tabs($("#example-vert-tabs"));
      TabObject.selectTab(stored_variable_tabToActivate);
    }
   });

I'll try to make a "mix" between my solution the one you posted, because mine did not managed so precisely the "aria-selected" and "aria-hidden" parameters.

Thank you again Brian, and especially for your help in the way to call the selectTab method. I had never found a way to do that : (your way)

     $("#example-vert-tabs").foundation('selectTab',"panel1v");

and I had only find a way to do the same by calling : (my way)

     var TabObject = new Foundation.Tabs($("#example-vert-tabs"));

I hope this thread will help many people too !

Hi Rafi,

I'm using 6.0.6 (not tested 6.1.1 yet because i'm currently developing).
I'm using the lateste Chrome (47.0.2526.80) and the latest Firefox (43.0.2), on OSX 10.8.5 (Mountain Lion).

To be honest, I'm interrogative and lost in the space of Foundation (^!) : The Off-canvas now have the scrollbar behaving correctly, and being displayed.

I've made some tweaks in JS (but no modification to the CSS).
Basically, Here is what I'm using, to have the Offcanvas behaving like a "native" app :

HTML:
HTML
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-options="autoFocus:false;">
MENU HERE
</div>
<div class="off-canvas-content" data-off-canvas-content>
ALL PAGE CONTENT HERE
</div>
</div>
</div>


JAVASCRIPT:
```Javascript
$(document).on("opened.zf.offcanvas", function(ev){
var vpHeight = $(window).height();
var vpScrollTop = $(window).scrollTop();
$("body").css({"overflow":"hidden"});
$(".off-canvas").css({"top":vpScrollTop, "height":vpHeight});

}).on("closed.zf.offcanvas", function(ev){
$("body").css({"overflow":"auto"});
});