Fixed #22950 -- Eased markup customization for choice field rendering

Thanks Patrick Robertson for the report.

django/forms/widgets.py

@@ -643,6 +643,8 @@ class ChoiceFieldRenderer(object):
     """
 
     choice_input_class = None
+    outer_html = '<ul{id_attr}>{content}</ul>'
+    inner_html = '<li>{choice_value}{sub_widgets}</li>'
 
     def __init__(self, name, value, attrs, choices):
         self.name = name
@@ -664,8 +666,7 @@ class ChoiceFieldRenderer(object):
         item in the list will get an id of `$id_$i`).
         """
         id_ = self.attrs.get('id', None)
-        start_tag = format_html('<ul id="{0}">', id_) if id_ else '<ul>'
+        output = []
-        output = [start_tag]
         for i, choice in enumerate(self.choices):
             choice_value, choice_label = choice
             if isinstance(choice_label, (tuple, list)):
@@ -677,14 +678,16 @@ class ChoiceFieldRenderer(object):
                                                       attrs=attrs_plus,
                                                       choices=choice_label)
                 sub_ul_renderer.choice_input_class = self.choice_input_class
-                output.append(format_html('<li>{0}{1}</li>', choice_value,
+                output.append(format_html(self.inner_html, choice_value=choice_value,
-                                          sub_ul_renderer.render()))
+                                          sub_widgets=sub_ul_renderer.render()))
             else:
                 w = self.choice_input_class(self.name, self.value,
                                             self.attrs.copy(), choice, i)
-                output.append(format_html('<li>{0}</li>', force_text(w)))
+                output.append(format_html(self.inner_html,
-        output.append('</ul>')
+                                          choice_value=force_text(w), sub_widgets=''))
-        return mark_safe('\n'.join(output))
+        return format_html(self.outer_html,
+                           id_attr=format_html(' id="{0}"', id_) if id_ else '',
+                           content=mark_safe('\n'.join(output)))
 
 
 class RadioFieldRenderer(ChoiceFieldRenderer):

tests/forms_tests/tests/test_widgets.py

@@ -17,7 +17,7 @@ from django.forms import (
 )
 from django.forms.widgets import RadioFieldRenderer
 from django.utils.deprecation import RemovedInDjango19Warning
-from django.utils.safestring import mark_safe
+from django.utils.safestring import mark_safe, SafeData
 from django.utils import six
 from django.utils.translation import activate, deactivate, override
 from django.test import TestCase, override_settings
@@ -615,6 +615,36 @@ class FormsWidgetTestCase(TestCase):
 <li><label><input type="radio" name="num" value="5" /> 5</label></li>
 </ul>""")
 
+        # Choices are escaped correctly
+        w = RadioSelect()
+        self.assertHTMLEqual(w.render('escape', None, choices=(('bad', 'you & me'), ('good', mark_safe('you &gt; me')))), """<ul>
+<li><label><input type="radio" name="escape" value="bad" /> you &amp; me</label></li>
+<li><label><input type="radio" name="escape" value="good" /> you &gt; me</label></li>
+</ul>""")
+
+        # Unicode choices are correctly rendered as HTML
+        w = RadioSelect()
+        self.assertHTMLEqual(six.text_type(w.render('email', 'ŠĐĆŽćžšđ', choices=[('ŠĐĆŽćžšđ', 'ŠĐabcĆŽćžšđ'), ('ćžšđ', 'abcćžšđ')])), '<ul>\n<li><label><input checked="checked" type="radio" name="email" value="\u0160\u0110\u0106\u017d\u0107\u017e\u0161\u0111" /> \u0160\u0110abc\u0106\u017d\u0107\u017e\u0161\u0111</label></li>\n<li><label><input type="radio" name="email" value="\u0107\u017e\u0161\u0111" /> abc\u0107\u017e\u0161\u0111</label></li>\n</ul>')
+
+        # Attributes provided at instantiation are passed to the constituent inputs
+        w = RadioSelect(attrs={'id': 'foo'})
+        self.assertHTMLEqual(w.render('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo'))), """<ul id="foo">
+<li><label for="foo_0"><input checked="checked" type="radio" id="foo_0" value="J" name="beatle" /> John</label></li>
+<li><label for="foo_1"><input type="radio" id="foo_1" value="P" name="beatle" /> Paul</label></li>
+<li><label for="foo_2"><input type="radio" id="foo_2" value="G" name="beatle" /> George</label></li>
+<li><label for="foo_3"><input type="radio" id="foo_3" value="R" name="beatle" /> Ringo</label></li>
+</ul>""")
+
+        # Attributes provided at render-time are passed to the constituent inputs
+        w = RadioSelect()
+        self.assertHTMLEqual(w.render('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo')), attrs={'id': 'bar'}), """<ul id="bar">
+<li><label for="bar_0"><input checked="checked" type="radio" id="bar_0" value="J" name="beatle" /> John</label></li>
+<li><label for="bar_1"><input type="radio" id="bar_1" value="P" name="beatle" /> Paul</label></li>
+<li><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle" /> George</label></li>
+<li><label for="bar_3"><input type="radio" id="bar_3" value="R" name="beatle" /> Ringo</label></li>
+</ul>""")
+
+    def test_radiofieldrenderer(self):
         # RadioSelect uses a RadioFieldRenderer to render the individual radio inputs.
         # You can manipulate that object directly to customize the way the RadioSelect
         # is rendered.
@@ -648,6 +678,18 @@ beatle J P Paul False
 beatle J G George False
 beatle J R Ringo False""")
 
+        # A RadioFieldRenderer object also allows index access to individual RadioChoiceInput
+        w = RadioSelect()
+        r = w.get_renderer('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo')))
+        self.assertHTMLEqual(str(r[1]), '<label><input type="radio" name="beatle" value="P" /> Paul</label>')
+        self.assertHTMLEqual(str(r[0]), '<label><input checked="checked" type="radio" name="beatle" value="J" /> John</label>')
+        self.assertTrue(r[0].is_checked())
+        self.assertFalse(r[1].is_checked())
+        self.assertEqual((r[1].name, r[1].value, r[1].choice_value, r[1].choice_label), ('beatle', 'J', 'P', 'Paul'))
+
+        with self.assertRaises(IndexError):
+            r[10]
+
         # You can create your own custom renderers for RadioSelect to use.
         class MyRenderer(RadioFieldRenderer):
             def render(self):
@@ -667,46 +709,21 @@ beatle J R Ringo False""")
 <label><input checked="checked" type="radio" name="beatle" value="G" /> George</label><br />
 <label><input type="radio" name="beatle" value="R" /> Ringo</label>""")
 
-        # A RadioFieldRenderer object also allows index access to individual RadioChoiceInput
+        # You can customize rendering with outer_html/inner_html renderer variables (#22950)
-        w = RadioSelect()
+        class MyRenderer(RadioFieldRenderer):
-        r = w.get_renderer('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo')))
+            outer_html = str('<div{id_attr}>{content}</div>')  # str is just to test some Python 2 issue with bytestrings
-        self.assertHTMLEqual(str(r[1]), '<label><input type="radio" name="beatle" value="P" /> Paul</label>')
+            inner_html = '<p>{choice_value}{sub_widgets}</p>'
-        self.assertHTMLEqual(str(r[0]), '<label><input checked="checked" type="radio" name="beatle" value="J" /> John</label>')
+        w = RadioSelect(renderer=MyRenderer)
-        self.assertTrue(r[0].is_checked())
+        output = w.render('beatle', 'J',
-        self.assertFalse(r[1].is_checked())
+                          choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo')),
-        self.assertEqual((r[1].name, r[1].value, r[1].choice_value, r[1].choice_label), ('beatle', 'J', 'P', 'Paul'))
+                          attrs={'id': 'bar'})
-
+        self.assertIsInstance(output, SafeData)
-        with self.assertRaises(IndexError):
+        self.assertHTMLEqual(output, """<div id="bar">
-            r[10]
+<p><label for="bar_0"><input checked="checked" type="radio" id="bar_0" value="J" name="beatle" /> John</label></p>
-
+<p><label for="bar_1"><input type="radio" id="bar_1" value="P" name="beatle" /> Paul</label></p>
-        # Choices are escaped correctly
+<p><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle" /> George</label></p>
-        w = RadioSelect()
+<p><label for="bar_3"><input type="radio" id="bar_3" value="R" name="beatle" /> Ringo</label></p>
-        self.assertHTMLEqual(w.render('escape', None, choices=(('bad', 'you & me'), ('good', mark_safe('you &gt; me')))), """<ul>
+</div>""")
-<li><label><input type="radio" name="escape" value="bad" /> you &amp; me</label></li>
-<li><label><input type="radio" name="escape" value="good" /> you &gt; me</label></li>
-</ul>""")
-
-        # Unicode choices are correctly rendered as HTML
-        w = RadioSelect()
-        self.assertHTMLEqual(six.text_type(w.render('email', 'ŠĐĆŽćžšđ', choices=[('ŠĐĆŽćžšđ', 'ŠĐabcĆŽćžšđ'), ('ćžšđ', 'abcćžšđ')])), '<ul>\n<li><label><input checked="checked" type="radio" name="email" value="\u0160\u0110\u0106\u017d\u0107\u017e\u0161\u0111" /> \u0160\u0110abc\u0106\u017d\u0107\u017e\u0161\u0111</label></li>\n<li><label><input type="radio" name="email" value="\u0107\u017e\u0161\u0111" /> abc\u0107\u017e\u0161\u0111</label></li>\n</ul>')
-
-        # Attributes provided at instantiation are passed to the constituent inputs
-        w = RadioSelect(attrs={'id': 'foo'})
-        self.assertHTMLEqual(w.render('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo'))), """<ul id="foo">
-<li><label for="foo_0"><input checked="checked" type="radio" id="foo_0" value="J" name="beatle" /> John</label></li>
-<li><label for="foo_1"><input type="radio" id="foo_1" value="P" name="beatle" /> Paul</label></li>
-<li><label for="foo_2"><input type="radio" id="foo_2" value="G" name="beatle" /> George</label></li>
-<li><label for="foo_3"><input type="radio" id="foo_3" value="R" name="beatle" /> Ringo</label></li>
-</ul>""")
-
-        # Attributes provided at render-time are passed to the constituent inputs
-        w = RadioSelect()
-        self.assertHTMLEqual(w.render('beatle', 'J', choices=(('J', 'John'), ('P', 'Paul'), ('G', 'George'), ('R', 'Ringo')), attrs={'id': 'bar'}), """<ul id="bar">
-<li><label for="bar_0"><input checked="checked" type="radio" id="bar_0" value="J" name="beatle" /> John</label></li>
-<li><label for="bar_1"><input type="radio" id="bar_1" value="P" name="beatle" /> Paul</label></li>
-<li><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle" /> George</label></li>
-<li><label for="bar_3"><input type="radio" id="bar_3" value="R" name="beatle" /> Ringo</label></li>
-</ul>""")
 
     def test_nested_choices(self):
         # Choices can be nested for radio buttons: