Turbolinks in rails is conflicting with Alpine JS dropdown and Hubspot form that uses javascript

user_168286 0
Viewed 2158

I am having trouble with Rails Turbolinks + Alpine JS and TailwindCSS drop-downs.

The problem is due to conflict with a Hubspot contact form on the Contact Us page. Here's the site:

bailoutwatch.org

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:

<%= link_to "Contact Us", contact_path, data: { turbolinks: false } %>

You can access the page directly at bailoutwatch.org/contact, but be sure to notice the "Dropdown flash" the first time you visit that page.

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.

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.

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?

I'm loading the js via my header like this:

<%= javascript_pack_tag "application", "data-turbolinks-track": "reload" %>

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):

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "HUBSPOT ACCOUNT NUMBER HERE",
    formId: "90fb717a-6ce5-42e1-9e6d-aa1470042cbc"
});
</script>

Here's a screenshot of the "dropdown flash" I'm describing.

enter image description here

turbolinks alpine.js webpack ruby-on-rails javascript
3 Answers

As Alpine recommends in its ReadMe, Use the Turbolinks Adapter

From CDN

Just include <script src="https://cdn.jsdelivr.net/npm/alpine-turbo-drive-adapter@1.0.x/dist/alpine-turbo-drive-adapter.min.js" defer></script> before your Alpine script in your page

From NPM

Install the package

npm i alpine-turbo-drive-adapter

Include it in your script along with Alpine JS.

import 'alpine-turbo-drive-adapter'
import 'alpinejs'
user_48789110

Put this in your CSS as per documentation. This is a bit nicer than putting display:none on each component as it cloaks the entire page:

[x-cloak] { display: none; }

x-cloak attributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work.

user_133452100

Alpine.js x-show works by toggling style="display: none;" on the element, so you can add that yourself in the code (example below, based on source I pulled from your site).

That way, when the page loads, it starts off hidden regardless of what JavaScript has loaded, but then Alpine.js will take control of that style attribute once it loads.

<div x-data="{ isOpen: false }" ...>
  <div x-show="isOpen" style="display: none;" ...>
    ...
  </div>
</div>
user_66561370
Related