Added a stimulus controller for tagsinput.

assets/controllers/elements/tagsinput_controller.js

@@ -0,0 +1,32 @@
+import {Controller} from "@hotwired/stimulus";
+import Bloodhound from "corejs-typeahead/dist/bloodhound";
+import 'corejs-typeahead';
+import '../../js/lib/tagsinput';
+import '../../css/tagsinput.css'
+
+
+export default class extends Controller {
+    connect() {
+        if(this.element.dataset.autocomplete) {
+            const engine = new Bloodhound({
+                //@ts-ignore
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
+                //@ts-ignore
+                queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
+                remote: {
+                    url: this.element.dataset.autocomplete,
+                    wildcard: 'QUERY'
+                }
+            });
+
+            $(this.element).tagsinput({
+                typeaheadjs: {
+                    name: 'tags',
+                    source: engine.ttAdapter()
+                }
+            });
+        } else { // Init tagsinput without typeahead
+            $(this.element).tagsinput();
+        }
+    }
+}

assets/js/register_events.js

@@ -8,10 +8,6 @@ import "bootstrap-fileinput/css/fileinput.css"
 import "./lib/jquery.tristate"
 import "bootstrap-fileinput";
 
-import 'corejs-typeahead';
-const Bloodhound = require('corejs-typeahead/dist/bloodhound.js');
-import './lib/tagsinput';
-
 
 
 const RegisterEventHelper = class {
@@ -25,8 +21,6 @@ const RegisterEventHelper = class {
 
         this.registerSpecialCharInput();
         this.registerHoverPics();
-
-        this.registerAutocompleteTagsinput();
     }
 
     registerLoadHandler(fn) {
@@ -97,42 +91,6 @@ const RegisterEventHelper = class {
         })
     }
 
-    registerAutocompleteTagsinput() {
-        this.registerLoadHandler(() => {
-            $('input.tagsinput').each(function() {
-
-                //Use typeahead if an autocomplete url was specified.
-                if($(this).data('autocomplete')) {
-
-                    //@ts-ignore
-                    var engine = new Bloodhound({
-                        //@ts-ignore
-                        datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
-                        //@ts-ignore
-                        queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
-                        remote: {
-                            url: $(this).data('autocomplete'),
-                            wildcard: 'QUERY'
-                        }
-                    });
-
-                    //@ts-ignore
-                    $(this).tagsinput({
-                        typeaheadjs: {
-                            name: 'tags',
-                            source: engine.ttAdapter()
-                        }
-                    });
-
-
-                } else { //Init tagsinput without typeahead
-                    //@ts-ignore
-                    $(this).tagsinput();
-                }
-            })
-        });
-    }
-
     registerSpecialCharInput() {
         this.registerLoadHandler(() => {
             //@ts-ignore

src/Form/Part/PartBaseType.php

@@ -147,6 +147,7 @@ class PartBaseType extends AbstractType
                 'empty_data' => '',
                 'attr' => [
                     'class' => 'tagsinput',
+                    'data-controller' => 'elements--tagsinput',
                     'data-autocomplete' => $this->urlGenerator->generate('typeahead_tags', ['query' => 'QUERY']),
                 ],
                 'disabled' => !$this->security->isGranted('tags.edit', $part),