Merge pull request #195 from wagtail/remove-widgetwithscript

Migrates away from using WidgetWithScript

Author: chigby

client/src/index.js

@@ -4,9 +4,6 @@ import AutocompleteInput, {
 
 export { AutocompleteInput, initAutocompleteInput };
 
-window.initAutoCompleteWidget = inputId => {
-  const autocompleteInputNode = document.querySelector(
-    `[data-autocomplete-input-id=${inputId}]`
-  );
+window.initAutoCompleteWidget = autocompleteInputNode => {
   initAutocompleteInput(autocompleteInputNode);
 };

wagtailautocomplete/static/wagtailautocomplete/controller.js

@@ -0,0 +1,7 @@
+class AutocompleteController extends window.StimulusModule.Controller {
+    connect() {
+        window.initAutoCompleteWidget(this.element);
+    }
+}
+
+window.wagtail.app.register('autocomplete-controller', AutocompleteController);

wagtailautocomplete/static/wagtailautocomplete/dist.css

@@ -4,6 +4,7 @@
     data-autocomplete-input-value="{{ widget.value }}"
     data-autocomplete-input-type="{{ widget.target_model }}"
     data-autocomplete-input-id="{{ widget.attrs.id }}"
+    data-controller="autocomplete-controller"
     {% if widget.can_create %}data-autocomplete-input-can-create{% endif %}
     {% if widget.is_single %}data-autocomplete-input-is-single{% endif %}
     data-autocomplete-input

wagtailautocomplete/static/wagtailautocomplete/dist.js

@@ -47,10 +47,7 @@ def test_form_field_media(self):
 
         self.assertIn('wagtailautocomplete/dist.css', media_html)
         self.assertIn('wagtailautocomplete/dist.js', media_html)
-
-    def test_render_js_init(self):
-        result = self.autocomplete_panel.render_html()
-        self.assertIn('initAutoCompleteWidget("id_owner");', result)
+        self.assertIn('wagtailautocomplete/controller.js', media_html)
 
     def test_render_as_field(self):
         result = self.autocomplete_panel.render_html()

wagtailautocomplete/templates/wagtailautocomplete/autocomplete.html

@@ -1,18 +1,16 @@
 import json
 
-from django import forms
+from django.forms import widgets, Media
 from wagtail.admin.staticfiles import versioned_static
-from wagtail.utils.widgets import WidgetWithScript
 
 from .views import render_page
 
 
-class Autocomplete(WidgetWithScript):
+class Autocomplete(widgets.TextInput):
     template_name = 'wagtailautocomplete/autocomplete.html'
 
     def __init__(self, target_model, can_create=False, is_single=True, attrs=None):
         super().__init__(attrs)
-
         self.target_model = target_model
         self.can_create = can_create
         self.is_single = is_single
@@ -49,16 +47,14 @@ def value_from_datadict(self, data, files, name):
             return value.get('pk', None)
         return None
 
-    def render_js_init(self, id_, name, value):
-        return "initAutoCompleteWidget({id});".format(
-            id=json.dumps(id_),
-        )
-
     @property
     def media(self):
-        return forms.Media(
+        return Media(
             css={
                 'all': [versioned_static('wagtailautocomplete/dist.css')],
             },
-            js=[versioned_static('wagtailautocomplete/dist.js')],
+            js=[
+                versioned_static('wagtailautocomplete/dist.js'),
+                versioned_static('wagtailautocomplete/controller.js'),
+            ],
         )