Ticket #27487: #27487.diff

django/contrib/admin/static/admin/css/widgets.css

@@ -546 +546 @@
     overflow: hidden;  /* clear floated contents */
 }
 
+.related-widget-wrapper .empty-choice {
+    display: none;
+}
+
 .related-widget-wrapper-link {
     opacity: 0.3;
 }

django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js

@@ -87 +87 @@
                     elem.value = newId;
                 }
             }
+            else if (elemName === 'UL') {
+                // For this case the result won't be appended to a simple html input field, we have a
+                // list (<ul></ul>) and we need to append a new item. An empty item is expected as the
+                // first item of the list, with the format specified. Finally, the empty item will be
+                // used as template in order to replace on it the new information.
+                if (elem.firstChild.className.includes('empty-choice')) {
+                    var itemTemplate = elem.firstChild.outerHTML,  // Get template html string
+                        inputIdRegExp = new RegExp(elem.id + '_-1', 'g'),  // RegExp to replace the input field Id
+                        inputId = elem.id + '_' + (elem.children.length - 1);  // New input Id
+
+                    itemTemplate = itemTemplate.replace(/empty-choice/g, '');  // Remove 'empty-choice' class
+                    itemTemplate = itemTemplate.replace(inputIdRegExp, inputId);  // Replace the input Id
+                    itemTemplate = itemTemplate.replace('value="#"', 'value="' + newId + '"');  // Replace input value
+                    itemTemplate = itemTemplate.replace('--EMPTY LABEL--', newRepr);  // Replace label value
+                    // append new item to the list
+                    elem.innerHTML = elem.innerHTML + itemTemplate;
+                }
+            }
             // Trigger a change event to update related links if required.
             $(elem).trigger('change');
         } else {

django/forms/widgets.py

@@ -701 +701 @@
 @python_2_unicode_compatible
 class ChoiceFieldRenderer(object):
     """
-    An object used by RadioSelect to enable customization of radio widgets.
+    An object used by RadioSelect and CheckboxSelectMultiple to enable customization of widgets.
     """
 
     choice_input_class = None
     outer_html = '<ul{id_attr}>{content}</ul>'
-    inner_html = '<li>{choice_value}{sub_widgets}</li>'
+    inner_html = '<li{class_attr}>{choice_value}{sub_widgets}</li>'
 
     def __init__(self, name, value, attrs, choices):
         self.name = name
@@ -729 +729 @@
         Outputs a <ul> for this set of choice fields.
         If an id was given to the field, it is applied to the <ul> (each
         item in the list will get an id of `$id_$i`).
+        The first item of the list will be an empty item.
         """
         id_ = self.attrs.get('id')
         output = []
+
+        def append_inner_item_choice(item_choice, index, class_attr=""):
+            w = self.choice_input_class(self.name, self.value, self.attrs.copy(), item_choice, index)
+            output.append(
+                format_html(self.inner_html, class_attr=class_attr, choice_value=force_text(w), sub_widgets='')
+            )
+
+        # append empty item choice
+        append_inner_item_choice(
+            ('#', '--EMPTY LABEL--'),  # empty choice
+            -1,  # index
+            format_html(' class="{}"', 'empty-choice')  # classes for empty item choice
+        )
+
         for i, choice in enumerate(self.choices):
             choice_value, choice_label = choice
             if isinstance(choice_label, (tuple, list)):
@@ -746 +761 @@
                 )
                 sub_ul_renderer.choice_input_class = self.choice_input_class
                 output.append(format_html(
-                    self.inner_html, choice_value=choice_value,
+                    self.inner_html, class_attr='', choice_value=choice_value,
                     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(self.inner_html, choice_value=force_text(w), sub_widgets=''))
+                append_inner_item_choice(choice, i)
+
         return format_html(
             self.outer_html,
             id_attr=format_html(' id="{}"', id_) if id_ else '',

js_tests/admin/RelatedObjectLookups.test.js

@@ -3 +3 @@
 /* eslint global-strict: 0, strict: 0 */
 'use strict';
 
-module('admin.RelatedObjectLookups');
+module('admin.RelatedObjectLookups', {
+    setup: function() {
+        this.win = {name: 'id_teacher', close: function() {}};
+    }
+});
 
 test('id_to_windowname', function(assert) {
     assert.equal(id_to_windowname('.test'), '__dot__test');
@@ -14 +18 @@
     assert.equal(windowname_to_id('__dot__test'), '.test');
     assert.equal(windowname_to_id('misc__dash__test'), 'misc-test');
 });
+
+test('dismissAddRelatedObjectPopup/Select', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<select id="id_teacher" name="teacher"></select>').appendTo('div.related-widget-wrapper');
+    $('<option value="" selected="">---------</option>').appendTo('#id_teacher');
+
+    dismissAddRelatedObjectPopup(this.win, '1', 'Alex');
+    assert.equal($('#id_teacher').find('option').length, 2);
+    assert.equal($('#id_teacher').find('option').last().text(), 'Alex');
+});
+
+test('dismissAddRelatedObjectPopup/SelectMultiple', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<select multiple="multiple" id="id_teacher" name="teacher"></select>').appendTo('div.related-widget-wrapper');
+
+    dismissAddRelatedObjectPopup(this.win, '1', 'Alex');
+    assert.equal($('#id_teacher').find('option').length, 1);
+    assert.equal($('#id_teacher').find('option').first().text(), 'Alex');
+
+    dismissAddRelatedObjectPopup(this.win, '2', 'Alan');
+    assert.equal($('#id_teacher').find('option').length, 2);
+    assert.equal($('#id_teacher').find('option').last().text(), 'Alan');
+});
+
+test('dismissAddRelatedObjectPopup/TextInput', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<input id="id_teacher" name="teacher" type="text" value="">').appendTo('div.related-widget-wrapper');
+
+    dismissAddRelatedObjectPopup(this.win, '1', 'Alex');
+    assert.equal($('#id_teacher').val(), '1');
+
+    dismissAddRelatedObjectPopup(this.win, '2', 'Alan');
+    assert.equal($('#id_teacher').val(), '2');
+});
+
+test('dismissAddRelatedObjectPopup/TextInput.vManyToManyRawIdAdminField', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<input id="id_teacher" name="teacher" type="text" value="" class="vManyToManyRawIdAdminField">').appendTo(
+        'div.related-widget-wrapper'
+    );
+
+    dismissAddRelatedObjectPopup(this.win, '1', 'Alex');
+    assert.equal($('#id_teacher').val(), '1');
+
+    dismissAddRelatedObjectPopup(this.win, '2', 'Alan');
+    assert.equal($('#id_teacher').val(), '1,2');
+});
+
+test('dismissAddRelatedObjectPopup/CheckboxSelectMultiple', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<ul id="id_books"></ul>').appendTo('div.related-widget-wrapper');
+    $('<li class="empty-choice"></li>').appendTo('#id_books');
+    $('<label for="id_books_-1"></label>').appendTo('li.empty-choice');
+    $('li label').html('<input id="id_books_-1" name="books" type="checkbox" value="#">--EMPTY LABEL--');
+
+    this.win = $.extend(this.win, {name: 'id_books'});
+
+    // add the first item
+    dismissAddRelatedObjectPopup(this.win, '1', 'Book1');
+    assert.equal($('#id_books').find('li').length, 2);
+    assert.notOk($('#id_books').find('li').last().hasClass("empty-choice"));
+    assert.equal($('input#id_books_0').length, 1);
+    assert.equal($('input#id_books_0').val(), 1);
+    assert.equal($('#id_books').find('li').last().find('label').text(), 'Book1');
+    assert.equal($('#id_books').find('input').last()[0].type, "checkbox");
+
+    // add the other item
+    dismissAddRelatedObjectPopup(this.win, '2', 'Book2');
+    assert.equal($('#id_books').find('li').length, 3);
+    assert.notOk($('#id_books').find('li').last().hasClass("empty-choice"));
+    assert.equal($('input#id_books_1').length, 1);
+    assert.equal($('input#id_books_1').val(), 2);
+    assert.equal($('#id_books').find('li').last().find('label').text(), 'Book2');
+    assert.equal($('#id_books').find('input').last()[0].type, "checkbox");
+});
+
+test('dismissAddRelatedObjectPopup/RadioSelect', function(assert) {
+    var $ = django.jQuery;
+    $('<div class="related-widget-wrapper"></div>').appendTo('#qunit-fixture');
+    $('<ul id="id_books"></ul>').appendTo('div.related-widget-wrapper');
+    $('<li class="empty-choice"></li>').appendTo('#id_books');
+    $('<label for="id_books_-1"></label>').appendTo('li.empty-choice');
+    $('li label').html('<input id="id_books_-1" name="books" type="radio" value="#">--EMPTY LABEL--');
+
+    this.win = $.extend(this.win, {name: 'id_books'});
+
+    // add the first item
+    dismissAddRelatedObjectPopup(this.win, '1', 'Book1');
+    assert.equal($('#id_books').find('li').length, 2);
+    assert.notOk($('#id_books').find('li').last().hasClass("empty-choice"));
+    assert.equal($('input#id_books_0').length, 1);
+    assert.equal($('input#id_books_0').val(), 1);
+    assert.equal($('#id_books').find('li').last().find('label').text(), 'Book1');
+    assert.equal($('#id_books').find('input').last()[0].type, "radio");
+
+    // add the other item
+    dismissAddRelatedObjectPopup(this.win, '2', 'Book2');
+    assert.equal($('#id_books').find('li').length, 3);
+    assert.notOk($('#id_books').find('li').last().hasClass("empty-choice"));
+    assert.equal($('input#id_books_1').length, 1);
+    assert.equal($('input#id_books_1').val(), 2);
+    assert.equal($('#id_books').find('li').last().find('label').text(), 'Book2');
+    assert.equal($('#id_books').find('input').last()[0].type, "radio");
+});

tests/forms_tests/tests/test_forms.py

@@ -584 +584 @@
 
         f = FrameworkForm(auto_id=False)
         self.assertHTMLEqual(str(f['language']), """<ul>
+<li class="empty-choice"><label><input type="radio" name="language" value="#" required /> --EMPTY LABEL--</label></li>
 <li><label><input type="radio" name="language" value="P" required /> Python</label></li>
 <li><label><input type="radio" name="language" value="J" required /> Java</label></li>
 </ul>""")
         self.assertHTMLEqual(f.as_table(), """<tr><th>Name:</th><td><input type="text" name="name" required /></td></tr>
 <tr><th>Language:</th><td><ul>
+<li class="empty-choice"><label><input type="radio" name="language" value="#" required /> --EMPTY LABEL--</label></li>
 <li><label><input type="radio" name="language" value="P" required /> Python</label></li>
 <li><label><input type="radio" name="language" value="J" required /> Java</label></li>
 </ul></td></tr>""")
         self.assertHTMLEqual(f.as_ul(), """<li>Name: <input type="text" name="name" required /></li>
 <li>Language: <ul>
+<li class="empty-choice"><label><input type="radio" name="language" value="#" required /> --EMPTY LABEL--</label></li>
 <li><label><input type="radio" name="language" value="P" required /> Python</label></li>
 <li><label><input type="radio" name="language" value="J" required /> Java</label></li>
 </ul></li>""")
@@ -605 +608 @@
         self.assertHTMLEqual(
             str(f['language']),
             """<ul id="id_language">
+<li class="empty-choice"><label for="id_language_-1">
+<input type="radio" id="id_language_-1" value="#" name="language" required /> --EMPTY LABEL--</label></li>
 <li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required />
 Python</label></li>
 <li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required />
@@ -619 +624 @@
             f.as_table(),
             """<tr><th><label for="id_name">Name:</label></th><td><input type="text" name="name" id="id_name" required /></td></tr>
 <tr><th><label for="id_language_0">Language:</label></th><td><ul id="id_language">
+<li class="empty-choice"><label for="id_language_-1">
+<input type="radio" id="id_language_-1" value="#" name="language" required />--EMPTY LABEL--</label></li>
 <li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required />
 Python</label></li>
 <li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required />
@@ -629 +636 @@
             f.as_ul(),
             """<li><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required /></li>
 <li><label for="id_language_0">Language:</label> <ul id="id_language">
+<li class="empty-choice"><label for="id_language_-1">
+<input type="radio" id="id_language_-1" value="#" name="language" required />--EMPTY LABEL--</label></li>
 <li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required />
 Python</label></li>
 <li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required />
@@ -639 +648 @@
             f.as_p(),
             """<p><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required /></p>
 <p><label for="id_language_0">Language:</label> <ul id="id_language">
+<li class="empty-choice"><label for="id_language_-1">
+<input type="radio" id="id_language_-1" value="#" name="language" required />--EMPTY LABEL--</label></li>
 <li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required />
 Python</label></li>
 <li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required />
@@ -808 +819 @@
 
         f = SongForm(auto_id=False)
         self.assertHTMLEqual(str(f['composers']), """<ul>
+<li class="empty-choice"><label><input type="checkbox" name="composers" value="#" /> --EMPTY LABEL--</label></li>
 <li><label><input type="checkbox" name="composers" value="J" /> John Lennon</label></li>
 <li><label><input type="checkbox" name="composers" value="P" /> Paul McCartney</label></li>
 </ul>""")
         f = SongForm({'composers': ['J']}, auto_id=False)
         self.assertHTMLEqual(str(f['composers']), """<ul>
+<li class="empty-choice"><label><input type="checkbox" name="composers" value="#" /> --EMPTY LABEL--</label></li>
 <li><label><input checked type="checkbox" name="composers" value="J" /> John Lennon</label></li>
 <li><label><input type="checkbox" name="composers" value="P" /> Paul McCartney</label></li>
 </ul>""")
         f = SongForm({'composers': ['J', 'P']}, auto_id=False)
         self.assertHTMLEqual(str(f['composers']), """<ul>
+<li class="empty-choice"><label><input type="checkbox" name="composers" value="#" /> --EMPTY LABEL--</label></li>
 <li><label><input checked type="checkbox" name="composers" value="J" /> John Lennon</label></li>
 <li><label><input checked type="checkbox" name="composers" value="P" /> Paul McCartney</label></li>
 </ul>""")
@@ -843 +857 @@
         self.assertHTMLEqual(
             str(f['composers']),
             """<ul id="composers_id">
+<li class="empty-choice"><label for="composers_id_-1">
+<input type="checkbox" name="composers" value="#" id="composers_id_-1" /> --EMPTY LABEL--</label></li>
 <li><label for="composers_id_0">
 <input type="checkbox" name="composers" value="J" id="composers_id_0" /> John Lennon</label></li>
 <li><label for="composers_id_1">

tests/forms_tests/tests/test_i18n.py

@@ -60 +60 @@
             f.as_p(),
             '<p><label for="id_somechoice_0">\xc5\xf8\xdf:</label>'
             '<ul id="id_somechoice">\n'
+            '<li class="empty-choice"><label for="id_somechoice_-1">'
+            '<input type="radio" id="id_somechoice_-1" value="#" name="somechoice" required /> '
+            '--EMPTY LABEL--</label></li>\n'
             '<li><label for="id_somechoice_0">'
             '<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required /> '
             'En tied\xe4</label></li>\n'
@@ -79 +82 @@
                 '\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c'
                 '\u043d\u043e\u0435 \u043f\u043e\u043b\u0435.</li></ul>\n'
                 '<p><label for="id_somechoice_0">\xc5\xf8\xdf:</label>'
-                ' <ul id="id_somechoice">\n<li><label for="id_somechoice_0">'
+                ' <ul id="id_somechoice">\n<li class="empty-choice"><label for="id_somechoice_-1">'
+                '<input type="radio" id="id_somechoice_-1" value="#" name="somechoice" required /> '
+                '--EMPTY LABEL--</label></li>\n'
+                '<li><label for="id_somechoice_0">'
                 '<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required /> '
                 'En tied\xe4</label></li>\n'
                 '<li><label for="id_somechoice_1">'

tests/forms_tests/tests/test_widgets.py

@@ -118 +118 @@
         self.assertHTMLEqual(
             output,
             """<div id="bar">
+<p><label for="bar_-1"><input type="radio" id="bar_-1" value="#" name="beatle" /> --EMPTY LABEL--</label></p>
 <p><label for="bar_0"><input 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>
 <p><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle" /> George</label></p>

tests/forms_tests/widget_tests/test_checkboxselectmultiple.py

@@ -9 +9 @@
     def test_render_value(self):
         self.check_html(self.widget(choices=self.beatles), 'beatles', ['J'], html=(
             """<ul>
+            <li class="empty-choice">
+            <label><input type="checkbox" name="beatles" value="#" /> --EMPTY LABEL--</label>
+            </li>
             <li><label><input checked type="checkbox" name="beatles" value="J" /> John</label></li>
             <li><label><input type="checkbox" name="beatles" value="P" /> Paul</label></li>
             <li><label><input type="checkbox" name="beatles" value="G" /> George</label></li>
@@ -19 +22 @@
     def test_render_value_multiple(self):
         self.check_html(self.widget(choices=self.beatles), 'beatles', ['J', 'P'], html=(
             """<ul>
+            <li class="empty-choice">
+            <label><input type="checkbox" name="beatles" value="#" /> --EMPTY LABEL--</label>
+            </li>
             <li><label><input checked type="checkbox" name="beatles" value="J" /> John</label></li>
             <li><label><input checked type="checkbox" name="beatles" value="P" /> Paul</label></li>
             <li><label><input type="checkbox" name="beatles" value="G" /> George</label></li>
@@ -32 +38 @@
         """
         self.check_html(self.widget(choices=self.beatles), 'beatles', None, html=(
             """<ul>
+            <li class="empty-choice">
+            <label><input type="checkbox" name="beatles" value="#" /> --EMPTY LABEL--</label>
+            </li>
             <li><label><input type="checkbox" name="beatles" value="J" /> John</label></li>
             <li><label><input type="checkbox" name="beatles" value="P" /> Paul</label></li>
             <li><label><input type="checkbox" name="beatles" value="G" /> George</label></li>
@@ -47 +56 @@
         )
         html = """
         <ul id="media">
+        <li class="empty-choice">
+        <label for="media_-1">
+        <input id="media_-1" name="nestchoice" type="checkbox" value="#" /> --EMPTY LABEL--
+        </label>
+        </li>
         <li>
         <label for="media_0"><input id="media_0" name="nestchoice" type="checkbox" value="unknown" /> Unknown</label>
         </li>
         <li>Audio<ul id="media_1">
+        <li class="empty-choice">
+        <label for="media_1_-1">
+        <input id="media_1_-1" name="nestchoice" type="checkbox" value="#" /> --EMPTY LABEL--
+        </label>
+        </li>
         <li>
         <label for="media_1_0">
         <input checked id="media_1_0" name="nestchoice" type="checkbox" value="vinyl" /> Vinyl
@@ -61 +80 @@
         </li>
         </ul></li>
         <li>Video<ul id="media_2">
+        <li class="empty-choice">
+        <label for="media_2_-1">
+        <input id="media_2_-1" name="nestchoice" type="checkbox" value="#" /> --EMPTY LABEL--
+        </label>
+        </li>
         <li>
         <label for="media_2_0"><input id="media_2_0" name="nestchoice" type="checkbox" value="vhs" /> VHS</label>
         </li>
@@ -84 +108 @@
         choices = [('a', 'A'), ('b', 'B'), ('c', 'C')]
         html = """
         <ul id="abc">
+        <li class="empty-choice">
+        <label for="abc_-1"><input type="checkbox" name="letters" value="#" id="abc_-1" /> --EMPTY LABEL--</label>
+        </li>
         <li>
         <label for="abc_0"><input checked type="checkbox" name="letters" value="a" id="abc_0" /> A</label>
         </li>
@@ -102 +129 @@
         widget = CheckboxSelectMultiple(attrs={'id': 'abc'}, choices=[('a', 'A'), ('b', 'B'), ('c', 'C')])
         html = """
         <ul id="abc">
+        <li  class="empty-choice">
+        <label for="abc_-1"><input type="checkbox" name="letters" value="#" id="abc_-1" /> --EMPTY LABEL--</label>
+        </li>
         <li>
         <label for="abc_0"><input checked type="checkbox" name="letters" value="a" id="abc_0" /> A</label>
         </li>

tests/forms_tests/widget_tests/test_radioselect.py

@@ -9 +9 @@
     def test_render(self):
         self.check_html(self.widget(choices=self.beatles), 'beatle', 'J', html=(
             """<ul>
+            <li class="empty-choice"><label><input type="radio" name="beatle" value="#" /> --EMPTY LABEL--</label></li>
             <li><label><input checked type="radio" name="beatle" value="J" /> John</label></li>
             <li><label><input type="radio" name="beatle" value="P" /> Paul</label></li>
             <li><label><input type="radio" name="beatle" value="G" /> George</label></li>
@@ -24 +25 @@
         )
         html = """
         <ul id="media">
+        <li class="empty-choice">
+        <label for="media_-1"><input id="media_-1" name="nestchoice" type="radio" value="#" /> --EMPTY LABEL--</label>
+        </li>
         <li>
         <label for="media_0"><input id="media_0" name="nestchoice" type="radio" value="unknown" /> Unknown</label>
         </li>
         <li>Audio<ul id="media_1">
+        <li class="empty-choice">
+        <label for="media_1_-1">
+        <input id="media_1_-1" name="nestchoice" type="radio" value="#" /> --EMPTY LABEL--
+        </label>
+        </li>
         <li>
         <label for="media_1_0"><input id="media_1_0" name="nestchoice" type="radio" value="vinyl" /> Vinyl</label>
         </li>
         <li><label for="media_1_1"><input id="media_1_1" name="nestchoice" type="radio" value="cd" /> CD</label></li>
         </ul></li>
         <li>Video<ul id="media_2">
+        <li class="empty-choice">
+        <label for="media_2_-1">
+        <input id="media_2_-1" name="nestchoice" type="radio" value="#" /> --EMPTY LABEL--
+        </label>
+        </li>
         <li><label for="media_2_0"><input id="media_2_0" name="nestchoice" type="radio" value="vhs" /> VHS</label></li>
         <li>
         <label for="media_2_1">
@@ -56 +70 @@
         widget = RadioSelect(attrs={'id': 'foo'}, choices=self.beatles)
         html = """
         <ul id="foo">
+        <li class="empty-choice">
+        <label for="foo_-1"><input type="radio" id="foo_-1" value="#" name="beatle" /> --EMPTY LABEL--</label>
+        </li>
         <li>
         <label for="foo_0"><input checked type="radio" id="foo_0" value="J" name="beatle" /> John</label>
         </li>
@@ -73 +90 @@
         """
         html = """
         <ul id="bar">
+        <li class="empty-choice">
+        <label for="bar_-1"><input type="radio" id="bar_-1" value="#" name="beatle" /> --EMPTY LABEL--</label>
+        </li>
         <li>
         <label for="bar_0"><input checked type="radio" id="bar_0" value="J" name="beatle" /> John</label>
         </li>