Foundation not initializing with yarn start

[jeremylind]

Submit a feature request or bug report

• [x ] I've read the guidelines for Contributing to Roots Projects
• This is a feature request
• [ x] This is a bug report
• [ x] This request isn't a duplicate of an existing issue
• [x ] I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse forums

---

What is the current behavior?

Using the Foundation framework, Foundation components do not initialized properly when compiled with yarn start. The Foundation object is available globally, and Foundation components have some data attributes set like they have been initialized, but they don't work. On further review, this seems to impact the Tooltip component and the MediaQuery component.

What is the expected or desired behavior?

Foundation components will initialize with the same behaviour as when compiled with yarn build.

---

Bug report

Please provide steps to reproduce, including full log output:

1. Install sage/roots using composer create-project roots/sage your-theme-name.
2. Select Foundation for the framework during setup.
3. Run yarn && yarn build
4. Activate the theme in WordPress
5. Include

$(window).on('changed.zf.mediaquery', function() {
    console.log('Media query changed.');
});

in common.js in the init function.
6. Run yarn start
7. Resize the browser window past a media query breakpoint. No message is logged in the console.

No errors thrown in compile log or in browser console.

Please describe your local environment:

WordPress version: 4.9.8
OS: 10.14
NPM/Node version: 8.11.1

Where did the bug happen? Development or remote servers?
Local development. Using Local by Flywheel with devUrl like http://localdomain.local proxying to http://localhost:3000

Is there a related Discourse thread or were any utilized (please link them)?

https://discourse.roots.io/t/sage-9-and-foundation-mediaquery/8686

---

[mmirus]

Thanks for reporting. I was able to reproduce this with Tooltips, but it seems like other Foundation JS components work. Is that your experience, as well?

The following worked for me.

Tabs:

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>

Dropdowns:

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Name
            <input type="text" placeholder="Kirk, James T.">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Rank
            <input type="text" placeholder="Captain">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

Could this be related to the Tooltips bug described in foundation/foundation-sites#7554?

Setting data-show-on="all" on the tooltip fixes this:

<span data-tooltip tabindex="1" data-show-on="all" title="Fancy word for a beetle.">scarabaeus</span>

[jeremylind]

Thanks for looking in to this. It looks like you were right, that the issue I described was specifically with the Tooltip component. I was able to get the other components you referenced working.

However, the initial issue that started my debugging here was using the Foundation MediaQuery component. My script includes:

$(window).on('changed.zf.mediaquery', function() {
    console.log('changed media query');
});

which doesn't seem to fire. Together with the Tooltip, I thought this was an issue with all Foundation components, but maybe it is isolated to the MediaQuery component.

Seems others have a similar issue with the MediaQuery component when using yarn start: https://discourse.roots.io/t/sage-9-and-foundation-mediaquery/8686

The MediaQuery event fires properly when compiled with yarn build.

[mmirus]

My best guess is that it's something to do with how hot module replacement works.

Adding this to main.js (or wherever) seems to get things working right:

jQuery(window).on("load", () => Foundation.MediaQuery._init());

(Just add it to the end of the file.)

You'll get a no-undef eslint error unless you add Foundation to your globals in .eslintrc.js or put import Foundation from "foundation-sites"; in main.js.

I don't love it, but seems to work until we can find something better.

[jeremylind]

That will do for now, thank you so much! I wonder if I should take this to the Foundation repo. It might be possible to initialize this component differently to be compatible with a tool like hot module replacement.

BTW, should I update the bug report details above to accurately reflect the issue? I'm new here...

[mmirus]

Happy to help! Might be good to ask the Foundation folks about it to see if they have solved this problem before. If you find anything out, please let us know!

And yes, updating the report details would be great. I might keep a mention of it manifesting as a problem with tooltips since that may be a helpful surface level symptom for folks reading.

Thanks!

[jeremylind]

Looks like this issue is due to the way the Foundation MediaQuery component initializes. It relies on a css value applied to the .foundation-mq meta tag to calculate breakpoints (https://foundation.zurb.com/sites/docs/media-queries.html#javascript).

Using hot module replacement, the css is not available before the MediaQuery component initializes. foundation/foundation-sites#10363 references the same issue, though caused the relevant css not being included at all, rather than not available at initialization due to hot module replacement.

Re-initializing the MediaQuery component after the window is loaded as suggested above is the easiest work around.

[mmirus]

I thought it might be something along those lines.

import "foundation-sites";

jQuery(document).ready(domReadyFoundation);

function domReadyFoundation($) {
  console.log(
    "[DOM loaded] .foundation-mq styles:",
    $(".foundation-mq").css("font-family")
  );
  // -> undefined

  // MediaQuery initializes in here
  $(document).foundation();

  console.log(
    "[DOM loaded] .foundation-mq styles (after Foundation init):",
    $(".foundation-mq").css("font-family")
  );
  // -> incorrect value (Times New Roman)

  console.log(
    "[DOM loaded] current breakpoint:",
    Foundation.MediaQuery.current
  );
  // -> undefined
}

jQuery(window).on("load", windowLoadFoundation);

function windowLoadFoundation() {
  console.log(
    "[Window loaded] .foundation-mq styles:",
    jQuery(".foundation-mq").css("font-family")
  );
  // -> correct value (e.g., small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em)

  window.Foundation.MediaQuery._init();

  console.log(
    "[Window loaded] current breakpoint:",
    Foundation.MediaQuery.current
  );
  // -> correct value (e.g., xlarge)
}

[campaignupgrade]

Foundation top-bar and responsive menus are also affected by this issue.

The fix above in only partially effective, top-bar-left and top-bar-right styling is broken. Specifically, top-bar is getting style="display: block;" instead of style="display: flex;", the later is the correct behavior that shows up after running yarn build.

We've had some luck fixing this by enqueuing foundation from the cdn on local builds (relies on is_local() which detects if we're running in docker):

  if( is_local() ) { . 
    wp_enqueue_style('foundation', '//cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css', false, '6.5.3');
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['foundation'], false, null);
  } else {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
  }

The problem with this approach is that some of our foundation _settings.scss changes are overridden, even though we load main.css after foundation.min.css.