Commit 907ef9d0 authored by Matt Johnson's avatar Matt Johnson Committed by Tim Graham
Browse files

Fixed #20555 -- Make subwidget id attribute available 

In `BoundField.__iter__`, the widget's id attribute is now passed to
each subwidget. A new id_for_label property was added to ChoiceInput.
parent db682dcc

django/forms/forms.py

+3 −1
Original line number Diff line number Diff line
@@ -434,7 +434,9 @@ class BoundField(object): 
        This really is only useful for RadioSelect widgets, so that you can

        iterate over individual radio buttons in a template.

        """

        for subwidget in self.field.widget.subwidgets(self.html_name, self.value()):

        id_ = self.field.widget.attrs.get('id') or self.auto_id

        attrs = {'id': id_} if id_ else {}

        for subwidget in self.field.widget.subwidgets(self.html_name, self.value(), attrs):

            yield subwidget



    def __len__(self):

django/forms/widgets.py

+8 −7
Original line number Diff line number Diff line
@@ -601,16 +601,15 @@ class ChoiceInput(SubWidget): 
        self.choice_value = force_text(choice[0])

        self.choice_label = force_text(choice[1])

        self.index = index

        if 'id' in self.attrs:

            self.attrs['id'] += "_%d" % self.index



    def __str__(self):

        return self.render()



    def render(self, name=None, value=None, attrs=None, choices=()):

        name = name or self.name

        value = value or self.value

        attrs = attrs or self.attrs

        if 'id' in self.attrs:

            label_for = format_html(' for="{0}_{1}"', self.attrs['id'], self.index)

        if self.id_for_label:

            label_for = format_html(' for="{0}"', self.id_for_label)

        else:

            label_for = ''

        return format_html('<label{0}>{1} {2}</label>', label_for, self.tag(), self.choice_label)
@@ -619,13 +618,15 @@ class ChoiceInput(SubWidget): 
        return self.value == self.choice_value



    def tag(self):

        if 'id' in self.attrs:

            self.attrs['id'] = '%s_%s' % (self.attrs['id'], self.index)

        final_attrs = dict(self.attrs, type=self.input_type, name=self.name, value=self.choice_value)

        if self.is_checked():

            final_attrs['checked'] = 'checked'

        return format_html('<input{0} />', flatatt(final_attrs))



    @property

    def id_for_label(self):

        return self.attrs.get('id', '')





class RadioChoiceInput(ChoiceInput):

    input_type = 'radio'

docs/ref/forms/widgets.txt

+41 −24
Original line number Diff line number Diff line
@@ -590,25 +590,26 @@ Selector and checkbox widgets 
    .. code-block:: html



        <div class="myradio">

            <label><input type="radio" name="beatles" value="john" /> John</label>

            <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" /> John</label>

        </div>

        <div class="myradio">

            <label><input type="radio" name="beatles" value="paul" /> Paul</label>

            <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /> Paul</label>

        </div>

        <div class="myradio">

            <label><input type="radio" name="beatles" value="george" /> George</label>

            <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" /> George</label>

        </div>

        <div class="myradio">

            <label><input type="radio" name="beatles" value="ringo" /> Ringo</label>

            <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /> Ringo</label>

        </div>



    That included the ``<label>`` tags. To get more granular, you can use each

    radio button's ``tag`` and ``choice_label`` attributes. For example, this template...

    radio button's ``tag``, ``choice_label`` and ``id_for_label`` attributes.

    For example, this template...



    .. code-block:: html+django



        {% for radio in myform.beatles %}

            <label>

            <label for="{{ radio.id_for_label }}">

                {{ radio.choice_label }}

                <span class="radio">{{ radio.tag }}</span>

            </label>
@@ -618,31 +619,41 @@ Selector and checkbox widgets 


    .. code-block:: html



            <label>

        <label for="id_beatles_0">

            John

                <span class="radio"><input type="radio" name="beatles" value="john" /></span>

            <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" /></span>

        </label>

            <label>



        <label for="id_beatles_1">

            Paul

                <span class="radio"><input type="radio" name="beatles" value="paul" /></span>

            <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /></span>

        </label>

            <label>



        <label for="id_beatles_2">

            George

                <span class="radio"><input type="radio" name="beatles" value="george" /></span>

            <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" /></span>

        </label>

            <label>



        <label for="id_beatles_3">

            Ringo

                <span class="radio"><input type="radio" name="beatles" value="ringo" /></span>

            <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /></span>

        </label>



    If you decide not to loop over the radio buttons -- e.g., if your template simply includes

    ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>`` with ``<li>`` tags, as above.

    If you decide not to loop over the radio buttons -- e.g., if your template

    simply includes ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>``

    with ``<li>`` tags, as above.



.. versionchanged:: 1.6



The outer ``<ul>`` container will now receive the ``id`` attribute defined on

the widget.



.. versionchanged:: 1.7



    When looping over the radio buttons, the ``label`` and ``input`` tags include

    ``for`` and ``id`` attributes, respectively. Each radio button has an

    ``id_for_label`` attribute to output the element's ID.



``CheckboxSelectMultiple``

~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -666,6 +677,12 @@ the widget. 
Like :class:`RadioSelect`, you can now loop over the individual checkboxes making

up the lists. See the documentation of :class:`RadioSelect` for more details.



.. versionchanged:: 1.7



    When looping over the checkboxes, the ``label`` and ``input`` tags include

    ``for`` and ``id`` attributes, respectively. Each checkbox has an

    ``id_for_label`` attribute to output the element's ID.



.. _file-upload-widgets:



File upload widgets

docs/releases/1.7.txt

+7 −0
Original line number Diff line number Diff line
@@ -145,6 +145,13 @@ Minor features 
* Explicit :class:`~django.db.models.OneToOneField` for

  :ref:`multi-table-inheritance` are now discovered in abstract classes.



* The ``<label>`` and ``<input>`` tags rendered by

  :class:`~django.forms.RadioSelect` and

  :class:`~django.forms.CheckboxSelectMultiple` when looping over the radio

  buttons or checkboxes now include ``for`` and ``id`` attributes, respectively.

  Each radio button or checkbox includes an ``id_for_label`` attribute to

  output the element's ID.



Backwards incompatible changes in 1.7

=====================================

tests/forms_tests/tests/test_widgets.py

+16 −0
Original line number Diff line number Diff line
@@ -833,6 +833,22 @@ beatle J R Ringo False""") 
        with self.assertRaises(IndexError):

            r[42]



    def test_subwidget(self):

        # Each subwidget tag gets a separate ID when the widget has an ID specified

        self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" id="abc_0" />

<input type="checkbox" name="letters" value="b" id="abc_1" />

<input checked="checked" type="checkbox" name="letters" value="c" id="abc_2" />""")



        # Each subwidget tag does not get an ID if the widget does not have an ID specified

        self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple().subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" />

<input type="checkbox" name="letters" value="b" />

<input checked="checked" type="checkbox" name="letters" value="c" />""")



        # The id_for_label property of the subwidget should return the ID that is used on the subwidget's tag

        self.assertHTMLEqual("\n".join(['<input type="checkbox" name="letters" value="%s" id="%s" />' % (c.choice_value, c.id_for_label) for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', [], choices=zip(list('abc'), list('ABC')))]), """<input type="checkbox" name="letters" value="a" id="abc_0" />

<input type="checkbox" name="letters" value="b" id="abc_1" />

<input type="checkbox" name="letters" value="c" id="abc_2" />""")



    def test_multi(self):

        class MyMultiWidget(MultiWidget):

            def decompress(self, value):