Foundation-sites: error in dropdowns and tooltips when navigating away

[frsechet]

How to reproduce this bug:

We are using Ember (+ ember-cli-foundation-sass) and using dropdowns and tooltips.
When we navigate away from an open tooltip or dropdown in a component, Ember will destroy it and Foundation will try to close it anyway, which leads to an error.
It works (it doesn't prevent navigation) but generates a lot of crashes that shouldn't happen.

What should happen:

no error in console

What happened instead:

this is one example of the error reports we have (all error reports available to @ncoden who is sitting next to me)

TypeError Uncaught TypeError: Cannot read property 'is' of null 
    /builds/clevy/app/node_modules/foundation-sites/dist/js/foundation.js:5909 HTMLBodyElement.<anonymous>

foundation.js:5909 is about there:

$body.off('click.zf.dropdown').on('click.zf.dropdown', function (e) {
--
  | if (_this.$anchors.is(e.target) \|\| _this.$anchors.find(e.target).length) {
  | return;
  | }

Browser(s) and Device(s) tested on:

chrome 64 right now, but any modern browser triggers the error (mobile safari, firefox, IE11...)

Foundation Version(s) you are using:

6.4.3

Test case link:

none

[ncoden]

Hi @frsechet. Thanks for your issue. I'll take a look at this tonigh.

[imrick]

Hello,

We have exactly the same problem. It seems to be because of there is no "off" on the body event when you are closing the dropdown by using the button.
In the event there is a return

if (_this.$anchors.is(e.target) \|\| _this.$anchors.find(e.target).length) {
return;

that prevents to unsubscribe from the even

$body.off('click.zf.dropdown');

I think the solution may be to do the "off" in the "close" function if "close-on-click" is enabled. ex:
l 298

if (this.options.trapFocus) {
      Keyboard.releaseFocus(this.$element);
 }
if(this.options.closeOnClick) {
    var $body = $(document.body).not(this.$element)
     $body.off('click.zf.dropdown');
}

[ncoden]

Hi @imrick,

According to my research that's the idea, but a bit more complex than that. $body.off(...) is inded called and we stop listening on the click event on body, but this action in _destroy is performed _in the click event itself_ so this does not prevent our listener to be called anyway.

I'll do some more tests to confirm this. If so it would be an issue with jQuery.

[imrick]

Hi @ncoden

I do confirm that the code added to the close function fix the issue on our side. The issue present itself only in the case you close the drowdown by clicking the element. In that case you leave the callback of the event 'click.zf.dropdown' whithout unsubscribe and the close function do nothing about this event.
You can test this by adding a break point in the callback 'click.zf.dropdown' and do the following:

• click on the element
• click again to close
• click somewhere in the body but not on the element

You will break again in the callback even if the dropdown is hide.

Hope that help