forms: add a datalist textinput widget (#37884)

src/authentic2/forms/widgets.py

@@ -30,6 +30,7 @@ import uuid
 import django
 from django.forms.widgets import DateTimeInput, DateInput, TimeInput, ClearableFileInput
 from django.forms.widgets import PasswordInput as BasePasswordInput
+from django.forms.widgets import TextInput
 from django.utils.formats import get_language, get_format
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext_lazy as _
@@ -281,3 +282,21 @@ class ProfileImageInput(ClearableFileInput):
         attrs = kwargs.pop('attrs', {})
         attrs['accept'] = 'image/*'
         super(ProfileImageInput, self).__init__(*args, attrs=attrs, **kwargs)
+
+
+class DatalistTextInput(TextInput):
+    def __init__(self, name='', data=(), attrs=None):
+        super(DatalistTextInput, self).__init__(attrs)
+        self.data = data
+        self.name = 'list__%s' % name
+        self.attrs.update({'list': self.name})
+
+    def render(self, name, value, attrs=None, renderer=None):
+        output = super(DatalistTextInput, self).render(
+                name, value, attrs=attrs, renderer=renderer)
+        datalist = '<datalist id="%s">' % self.name
+        for element in self.data:
+            datalist += '<option value="%s">' % element
+        datalist += '</datalist>'
+        output += datalist
+        return output

tests/test_widgets.py

@@ -1,5 +1,5 @@
 # authentic2 - versatile identity manager
-# Copyright (C) 2010-2019 Entr'ouvert
+# Copyright (C) 2010-2020 Entr'ouvert
 #
 # This program is free software: you can redistribute it and/or modify it
 # under the terms of the GNU Affero General Public License as published
@@ -15,16 +15,39 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 # authentic2
 
+from pyquery import PyQuery
+
 from authentic2.widgets import DateTimeWidget, DateWidget, TimeWidget
+from authentic2.widgets import DatalistTextInput
 
 
-def test_widgets_init_and_render_no_locale():
+def test_datetimepicker_init_and_render_no_locale():
     DateTimeWidget().render('wt', '2019/12/12 12:34:34')
     DateWidget().render('wt', '2019/12/12')
     TimeWidget().render('wt', '12:34:34')
 
 
-def test_widgets_init_and_render_fr(french_translation):
+def test_datetimepicker_init_and_render_fr(french_translation):
     DateTimeWidget().render('wt', '2019/12/12 12:34:34')
     DateWidget().render('wt', '2019/12/12')
     TimeWidget().render('wt', '12:34:34')
+
+
+def test_datalisttextinput_init_and_render():
+    data = ['blue', 'red', 'green']
+    widget = DatalistTextInput(name='foo', data=data)
+    html = widget.render(name='bar', value='examplevalue')
+    query = PyQuery(html)
+
+    textinput = query.find('input')
+    assert textinput.attr('name') == 'bar'
+    assert textinput.attr('value') == 'examplevalue'
+    assert textinput.attr('list') == 'list__foo'
+
+    datalist = query.find('datalist')
+    assert datalist.attr('id') == 'list__foo'
+    for option in datalist.find('option'):
+        assert len(option.values()) == 1
+        assert option.values()[0] in data
+        data.remove(option.values()[0])
+    assert not data