Integration with Turbo

Hi Chris,

First of all, great work on this project 👍🏼

I am looking into fixing an issue I’ve found whist using the dropdown component in a Turbo/Rails setup.

The dropdown is working as expected, the issue occurs when navigating back to the screen where the dropdown link was clicked (via the back button), the dropdown remains open:

https://user-images.githubusercontent.com/1736807/109223227-3d399500-77b2-11eb-9b68-45d2872c969a.mov

Adding data-turbo="false" to the dropdown options solves the issue, so it’s definitely a turbo related problem.

I was hoping that by adding a this.hide() call, as part of the disconnect() method, would achieve the desired solution:

diff --git a/src/dropdown.js b/src/dropdown.js
index de8a0bf..ff2c64e 100644
--- a/src/dropdown.js
+++ b/src/dropdown.js
@@ -49,6 +49,7 @@ export default class extends Controller {
     if (this.hasButtonTarget) {
       this.buttonTarget.removeEventListener("keydown", this._onMenuButtonKeydown)
     }
+    this.hide();
   }


@@ -125,7 +126,7 @@ export default class extends Controller {
   }

   hide(event) {
-    if (this.element.contains(event.target) === false && this.openValue) {
+    if ((event === undefined || this.element.contains(event.target) === false) && this.openValue) {
       this.openValue = false
     }
   }

However, the hide does not occur until the page is redisplayed:

https://user-images.githubusercontent.com/1736807/109224200-89d1a000-77b3-11eb-82c9-b12a3828034e.mov

As a workaround, I’ve added a turbo:before-cache to hide the dropdown e.g:

$(document).on('turbo:before-cache', function() {
  $('[data-controller="dropdown"] [data-dropdown-target]').addClass('hidden');
});

If you have any ideas on how tailwindcss-stimulus-components could be modified to accommodate this issue, I’m happy to implement the change and open a PR. Perhaps it falls outside the scope of tailwindcss-stimulus-components, and using the turbo:before-cache is the best solution?

Thanks

[thanosbellos]

Even without animations i see the menu closing rapidly after restoring from the cache. But it does close something that is crucial in general.

Just to confirm, this doesn’t happen when using tailwindcss-stimulus-components by default, the dropdown is always open after restoring from the cache?

Once this.hide() is added to the tailwindcss-stimulus-components dropdown controller disconnect method, I experience what you have described:

the menu closing rapidly after restoring from the cache.

Exactly. those were my findings using the modified version that calls hide when the controller disconnects and for either library(turbolinks and turbo)

[davegudge]

Using “@hotwired/turbo-rails”: “^7.0.0-beta.5” defined via the package.json, the output is as follows:

Would you like me to test against Turbo’s main branch? Did you find an easy way to do this? I have both turbo-rails and turbo checked out locally. I’m assuming the easiest way is to copy the relevant files into my project’s node_modules/@hotwired/turbo/dist/ (and node_modules/@hotwired/turbo-rails/app/assets/javascripts/turbo.js)?