Foundation-sites: Callouts not closing

[lukeyouell]

How to reproduce this bug:

Create a closable callout
Attempt to close callout

What should happen:

Callout should close

What happened instead:

Nothing

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

Chrome, iMac

Foundation Version(s) you are using:

6.4.1

[danclaytondev]

https://codepen.io/danclayton50/pen/qXadjJ
Here is a codepen that demonstrates it.
Also tested on IE11.

[kball]

Based on the codepen above, the issue is user error - you need to add data-closable to the callout to make it listen for close events, and data-close to the close button to make it fire them. @lukeyouell can you confirm if this addresses your usecase as well?

[lukeyouell]

@kball

I've included the code I'm using below:

<div class="callout success" data-closable>

Account updated.

<button type="button" class="close-button" data-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z"></path></svg>
</button>

</div>

[kball]

@lukeyouell I set up a codepen with this here: https://codepen.io/kball/pen/gxwpda

It appears to be working... is there any chance you're not running the jquery foundation helper on this code? Either not including $(document).foundation() or putting this in the page after that runs and not rerunning?

[lukeyouell]

@kball

The page I'm using it on is only loading jquery and foundation, so there should be no conflicts.

Unfortunately I can't show it to you as it's located within a web application!

It seems to work on pages where modals exist, but nowhere else? I've tried downloading Foundation from different sources to see if there's a big in a particular download but I'm seeing the same behaviour.

[kball]

@lukeyouell are you running $(document).foundation() after the DOM is loaded?

[lukeyouell]

@kball I'm loading Foundation using require.js, could this be causing it?

[kball]

The only thing you'd need to make sure you did there is run $(document).foundation() inside the callback after the require is loaded.

I just want to make sure you're doing that initialization step, as so far unless I missed it you haven't confirmed that... To be super clear, you need to both _load_ the javascript into the page and _initialize_ the javascript on the page that you want to have Foundation JS running on (IE tell Foundation "here's the part of the DOM you should be running on")... the first step is handled by require, but you still do the initialization step...

[danclaytondev]

@kball
My codepen was copied and pasted from the docs kitchen sink so that needs updating with data-closable adding! Who is responsible for the docs?

[kball]

@danclayton50 they too are open source! Would you be up for submitting a PR to fix? Here's the relevant file: https://github.com/zurb/foundation-sites/blob/develop/docs/pages/kitchen-sink.md#close-button

[lukeyouell]

@kball Yes that's the case as everything else works fine, modals close fine and Abide works perfectly. The loading of the JS is done as it should be.

I've tried stripping everything from the page so that only the callout is outputted, yet it still won't close.

It's a strange one.

[kball]

@lukeyouell very odd... is there any way you can get me access to a repro case? Either in codepen, or happy to check out a private repo or similar

[lukeyouell]

@kball I've narrowed it down to my copy of Foundation, if I use the css & js from cdnjs.cloudflare.com it works fine, it just doesn't work when I use the version downloaded from the Foundation website

[lukeyouell]

@kball

The callout closes as expected when I use https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js

But not when I use the same version of Foundation downloaded from the Foundation website.

I've compared both versions using https://www.diffchecker.com and there seems to be a number of differences between the JS files

[kball]

Interesting... how did you download, and which file are you loading from the download?

[lukeyouell]

I tried the "complete" version and the custom version (everything selected) located at http://foundation.zurb.com/sites/download.html/

It's foundation.js & foundation.min.js that both differ from the versions hosted on the Cloudflare CDN

[kball]

They're going to differ because they still use the "custom" build process even if they're complete, which is slightly different than the packaged build process... that said this should give me enough to hunt down the issue. Thanks

[kball]

ok... the issue is that the triggers are getting explicitly initialized in the distributed build, but only implicitly initialized by other dependencies in the customizer generated builds... which is why you see it work on pages that have a reveal.

I don't see a clean workaround, but you could force it by initializing an element that depends on triggers, e.g.

(new Foundation.Tooltip($('<div>'))).destroy();

[lukeyouell]

@kball

I fixed it by downloading the version stored on Cloudflare's CDN.

The versions that didn't work are those available on the Foundation website, both the standard "complete" version as well as the customised version.

Is this not something that should be fixed?

[kball]

Yes, will fix

[danclaytondev]

Interestingly, in my codepen, with data-closeable added it still doesn't work.

[matthendrix]

The same scenario happened to me too, I too fixed it by downloading the version stored on Cloudflare's CDN.

[sidsamant]

I am facing the same issue when I upgraded from v6.3.1 to v6.4.1. It worked when I used the CDN links.