tests/admin_pages/test_form.py

@@ -2594,6 +2594,36 @@ def test_form_edit_item_field_data_source(pub):
     assert FormDef.get(1).fields[0].items == ['XXX']
 
 
+def test_form_edit_item_field_many_data_sources(pub):
+    create_superuser(pub)
+    create_role(pub)
+
+    NamedDataSource.wipe()
+
+    CardDef.wipe()
+    FormDef.wipe()
+    formdef = FormDef()
+    formdef.name = 'form title'
+    formdef.fields = [fields.ItemField(id='1', label='1st field')]
+    formdef.store()
+
+    app = login(get_app(pub))
+    resp = app.get('/backoffice/forms/1/fields/1/')
+    assert len(resp.form['data_source$type'].options) == 5
+    assert resp.form['data_source$type'].attrs.get('data-autocomplete') is None
+
+    for i in range(50):
+        data_source = NamedDataSource(name='Foobar %s' % i)
+        data_source.data_source = {'type': 'json', 'value': 'http://remote.example.net/404'}
+        data_source.record_on_errors = True
+        data_source.notify_on_errors = True
+        data_source.store()
+
+    resp = app.get('/backoffice/forms/1/fields/1/')
+    assert len(resp.form['data_source$type'].options) == 55
+    assert resp.form['data_source$type'].attrs.get('data-autocomplete') == 'true'
+
+
 def test_form_edit_item_field_data_source_with_categories(pub):
     create_superuser(pub)
     create_role(pub)

wcs/data_sources.py

@@ -24,7 +24,7 @@ import xml.etree.ElementTree as ET
 from django.core.cache import cache
 from django.template import TemplateSyntaxError, VariableDoesNotExist
 from django.utils.encoding import force_bytes, force_str
-from quixote import get_publisher, get_request, get_session
+from quixote import get_publisher, get_request, get_response, get_session
 from quixote.errors import RequestError
 from quixote.html import TemplateIO
 
@@ -198,6 +198,10 @@ class DataSourceSelectionWidget(CompositeWidget):
             value=value.get('type'),
             attrs={'data-dynamic-display-parent': 'true'},
         )
+        if len(options) > 50:
+            widget = self.get_widget('type')
+            widget.attrs['data-autocomplete'] = 'true'
+            get_response().add_javascript(['select2.js'])
 
         self.parse()
         if not self.value:

wcs/qommon/static/css/dc2/admin.scss

@@ -3046,3 +3046,11 @@ table.block-usage {
 		width: 50%;
 	}
 }
+
+.DataSourceSelectionWidget {
+	width: 100%;
+	.select2 {
+		width: calc(100% - 4em) !important; /* some space left for the "go to" button */
+		min-width: auto !important;
+	}
+}

wcs/qommon/static/js/qommon.admin.js

@@ -29,7 +29,11 @@ $(function() {
       if (typeof jumpto_button == 'undefined') {
         this.jumpto_button = $('<a>', {'class': 'button button--go-to-option', text: '↗'});
         this.jumpto_button.hide();
-        this.jumpto_button.insertAfter($(this));
+        if ($(this).attr('aria-hidden')) { // select2
+          this.jumpto_button.insertAfter($(this).next());
+        } else {
+          this.jumpto_button.insertAfter($(this));
+        }
       }
       var option = $(this).find('option:selected');
       var data_url = option.data('goto-url');