Merge pull request #4226 from manyfold3d/cocoon-fix

Fix bug in cocooned groups with turbo

Author: Floppy

app/javascript/application.ts

@@ -3,11 +3,8 @@ import '@hotwired/turbo-rails'
 import 'controllers/index'
 
 import Rails from '@rails/ujs'
-import Cocooned from '@notus.sh/cocooned'
 
 document.addEventListener('DOMContentLoaded', () => {
   // Legacy Rails UJS
   Rails.start()
-  // Cocooned only wants initializing once, it seems
-  Cocooned.start()
 })

app/javascript/controllers/cocooned_controller.ts

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+
+import Cocooned from '@notus.sh/cocooned'
+
+// Connects to data-controller="i18n"
+export default class extends Controller {
+  connect (): void {
+    Cocooned.create(this.element)
+  }
+}

app/javascript/controllers/index.ts

@@ -6,6 +6,7 @@ import { application } from './application'
 
 import BulkEditController from './bulk_edit_controller'
 import CarouselController from './carousel_controller'
+import CocoonedController from './cocooned_controller'
 import EditableController from './editable_controller'
 import I18nController from './i18n_controller'
 import RendererController from './renderer_controller'
@@ -16,6 +17,7 @@ import UploadController from './upload_controller'
 import ZxcvbnController from './zxcvbn_controller'
 
 application.register('carousel', CarouselController)
+application.register('cocooned', CocoonedController)
 application.register('bulk-edit', BulkEditController)
 application.register('editable', EditableController)
 application.register('i18n', I18nController)

app/javascript/controllers/tag_input_controller.ts

@@ -19,11 +19,13 @@ export default class extends Controller {
       }
     })
   }
+
   disconnect (): void {
-    this.tomSelect?.destroy();
+    this.tomSelect?.destroy()
   }
+
   reconnect (): void {
-    this.disconnect();
-    this.connect();
+    this.disconnect()
+    this.connect()
   }
 }

app/views/application/_caber_relations_form.html.erb

@@ -4,7 +4,7 @@
       <%= t(".permissions") %>
     </div>
     <div class="col border p-3">
-      <%= cocooned_container id: "cocooned-caber-relations" do %>
+      <%= cocooned_container id: "cocooned-caber-relations", data: {controller: "cocooned"} do %>
         <%= form.fields_for :caber_relations do |f| %>
           <%= render "caber_relation_fields", f: f %>
         <% end %>

app/views/application/_links_form.html.erb

@@ -1,4 +1,4 @@
-<%= cocooned_container id: "cocooned-links" do %>
+<%= cocooned_container id: "cocooned-links", data: {controller: "cocooned"} do %>
   <%= form.fields_for :links do |f| %>
     <%= render "link_fields", f: f %>
   <% end %>