Foundation-sites: [Magellan] active class not being applied when content is loaded dynamically

[npapazian]

How can we reproduce this bug

1. Create a magellan nav with sticky
2. Populate content dynamically (angular)
3. Initialize foundation js after content is loaded

What did you expect to happen
Magellan should apply an 'active' class when the element is in view

What happened instead
No active classes are applied to the menu.

I'm using F6 in an angular application and i'm trying to use ng-repeat with the requisite magellan markup. I'm initializing the foundation js after content is loaded. plugins (sticky, accordion, dropdown) seem to work, just not magellan.

Codepen: http://codepen.io/npapazian/pen/MKVGrr

[zurbchris]

That's strange and annoying. Angular (or something) is squelching the scroll listener which triggers the _updateActive function. There's one that should be applied to window with the $(document).foundation() call that doesn't seem to be triggering the magellan listener. I honestly have no idea why this is happening, but I only spent 10 minutes with it.

[a21y]

Same issue for me using Meteor (Blaze rendering engine).

[brianmickelson]

Same issue for me using Panini and importing Markdown content

[sofsirwj]

I'm using Foundation 6.2.3, and meet same issue when using Magellan with React.
if refresh the page, it will work(cause server rendering). but if navigate to the page(with React Router used), it will not set active class

not sure if I handle this rightly, but I make it work by doing two steps after new it:
Step 1: $('#magellan').foundation('reflow');
in Foundation source code, line 4926:

        $(window).one('load', function () {
          if (_this.options.deepLinking) {
            if (location.hash) {
              _this.scrollToLoc(location.hash);
            }
          }
          _this.calcPoints();
          _this._updateActive();
        });

reflow does calcPoints and _updateActive, that will make location detect working and set active class

Step 2: Foundation.IHearYou();
in Foundation source code, line 1588:

$(window).load(function () {
    checkListeners();
  });

and line 1728:

  Foundation.IHearYou = checkListeners;

_Foundation should do these automatically when create new instance of Magellan, right?_

[kball]

Generally speaking, we do not recommend using the native jquery-based Foundation javascript within an Angular or React app. Both of these frameworks expect to control the entire DOM, and unless you're an expert, getting them to play nicely with something else controlling the DOM is very challenging.

There are some excellent Foundation ports into these frameworks that reimplement the javascript in a way that plays nicely within the framework:

• Angular (http://circlingthesun.github.io/angular-foundation-6/)
• React (https://github.com/aruberto/react-foundation-components)

However from what I can see, neither has implemented Magellan. I'm not entirely sure why.

[mortenson]

I've run into this as well when creating Magellan menus dynamically in JS based on page content.

[designerdean]

I'm seeing this problem as well in an Angular app, Foundation v6.3.0, but the problem ins happening in a reveal modal.

[dlewand691]

I am also seeing this issue. Menu links get the active class on click, but not when section scrolls into place.

[iamrobert]

I was finding that magellan wasn't firing data-events="scroll" in my code. So - I manually added it to and it now fires.

<ul class="vertical menu" data-magellan id="magellan" data-events="scroll">