title: Turbolinks in rails is conflicting with Alpine JS dropdown and Hubspot form that uses javascript
body: <p>I am having trouble with Rails <a href="https://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks" rel="nofollow noreferrer">Turbolinks</a> + <a href="https://github.com/alpinejs/alpine" rel="nofollow noreferrer">Alpine JS</a> and <a href="https://tailwindui.com/components/application-ui/elements/dropdowns" rel="nofollow noreferrer">TailwindCSS drop-downs</a>.</p>
  
  <p>The problem is due to conflict with a Hubspot contact form on the Contact Us page. Here's the site:</p>
  
  <p><a href="https://bailoutwatch.org" rel="nofollow noreferrer">bailoutwatch.org</a></p>
  
  <p>The Contact Us link is in the footer and I'm linking to the Contact Us page with in a way that turns off turbolinks:</p>
  
  <pre><code>&lt;%= link_to "Contact Us", contact_path, data: { turbolinks: false } %&gt;
  </code></pre>
  
  <p>You can access the page directly at <a href="https://bailoutwatch.org/contact" rel="nofollow noreferrer">bailoutwatch.org/contact</a>, but be sure to notice the "Dropdown flash" the first time you visit that page.</p>
  
  <p>If I don't turn off turbolinks when linking to the Contact Us page, then turbolinks breaks a Hubspot form that is loaded via javascript and is a requirement for that page.</p>
  
  <p>Because I have turned off turbolinks for this Contact Us page the first time you visit the site it triggers the dropdowns that are using Alpine JS. It's a quick flash and once the dropdowns have been cached in turbolinks it doesn't happen again, but I can't figure out the correct way to load all of these JS requirements without that dropdown flash when visiting the Contact Us page.</p>
  
  <p>How should I do this in Rails so that I can use turbolinks on the rest of the site without breaking the Hubspot form or reloading all the javascript again (causing the dropdown flash) when visiting the Contact Us page?</p>
  
  <p>I'm loading the js via my header like this:</p>
  
  <pre><code>&lt;%= javascript_pack_tag "application", "data-turbolinks-track": "reload" %&gt;
  </code></pre>
  
  <p>Then, the Alpine JS is loaded via webpack (it's installed with Yarn). Then the Hubspot form is loaded via inline javascript in the body of the page. It looks like this (_hubspot_contact_form.html.erb):</p>
  
  <pre><code>&lt;!--[if lte IE 8]&gt;
  &lt;script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    hbspt.forms.create({
      portalId: "HUBSPOT ACCOUNT NUMBER HERE",
      formId: "90fb717a-6ce5-42e1-9e6d-aa1470042cbc"
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's a screenshot of the "dropdown flash" I'm describing.</p>
  
  <p><a href="https://i.stack.imgur.com/gi1O9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gi1O9.jpg" alt="enter image description here"></a></p>