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

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/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/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms/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.

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

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/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/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms/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.

• javascript
• ruby-on-rails
• webpack
• turbolinks
• alpine.js

Share Improve this question Follow asked Jun 15, 2020 at 19:48 Lee McAlillyLee McAlilly 9,3241212 gold badges6464 silver badges9797 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As Alpine remends in its ReadMe, Use the Turbolinks Adapter

From CDN

Just include <script src="https://cdn.jsdelivr/npm/[email protected]/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'

Put this in your CSS as per documentation. This is a bit nicer than putting display:none on each ponent 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.

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>