JavaScript error when triggering dropdown

Hi folks.

I’m having trouble with dropdown not working and triggering the following JavaScript exception in my browser console:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at GetDimensions (foundation.util.box.js:73)
    at Object.GetExplicitOffsets (foundation.util.box.js:120)
    at Dropdown._setPosition (foundation.positionable.js:129)
    at Dropdown._setPosition (foundation.dropdown.js:121)
    at Dropdown.open (foundation.dropdown.js:260)
    at Dropdown.toggle (foundation.dropdown.js:319)
    at HTMLDivElement.dispatch (jquery.js:5429)
    at HTMLDivElement.elemData.handle (jquery.js:5233)
    at Object.trigger (jquery.js:8715)
    at jQuery.fn.init.triggerHandler (jquery.js:8799)

I am using foundation-sites 6.6.3 on an Elixir Phoenix app. I am using the default webpack configuration that ships with Phoenix. I also have jquery 3.5.1 and what-input 5.2.9 installed.

I have the following code in my app.js:

import jQuery from "jquery"
window.$ = jQuery;
import "what-input"
import "foundation-sites/js/foundation"

$(document).foundation();

The only other JavaScript present is the default Phoenix and LiveView javascript.

Foundation is loading and some JavaScript features are working fine (eg. Close Button) so I don’t think it’s the installation or setup.

I have the following markup to trigger the dropdown (this markup is generated by LiveView, so could it be a dom-patching issue?)

    <li>
      <a class="profile--link" href="#" data-toggle="profile-dropdown">
        <span class="profile--at">@</span><span class="profile--name">jimsy</span>
        <img src="https://www.gravatar.com/avatar/9f3c6086ba79db0ab2547eee1479b9cd?d=identicon" title="@jimsy" alt="@jimsy" class="profile--avatar">
      </a>
      <div id="profile-dropdown" class="dropdown-pane profile--menu" data-dropdown="" data-hover="true" data-hover-pane="true" data-position="bottom" data-alignment="right" data-auto-focus="true">
        <ul class="menu vertical">
          <li><a href="/auth">Sign out</a></li>
            <a href="/admin/dashboard">Live Dashboard</a>
        </ul>
      </div>
    </li>

The same exception is being raised in both Firefox and Chrome. Any assistance would be greatly appreciated.

Thanks,
James.

I can not reproduce it at https://codepen.io/DanielRuf/pen/eYJmevB

Do you load and initialize Foundation at the end of </body> and wait until documentready?

Oh my god. Now I feel dumb. Changed

$(document).foundation();

to

$(document).ready(() => {
  $(document).foundation();
});

and now it works. Thanks so much!

If your trigger is dynamically inserted into the DOM after load or just not there it the dropdown plugin will throw this error.