[Django] #35409: CheckbioxMultipleSelect widget is broken

[Django]

#35409: CheckbioxMultipleSelect widget is broken
------------------------------------------+------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
------------------------------------------+------------------------
My application has an emailer page with a list of recipients that can be
edited as follows.

In the form definition:
recipients =
forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple)

In __init__:
self.fields['recipients'].choices = recipient_choices

This has worked since 2009, but Django 4.2.x has broken it as it does not
insert line breaks between the recipients and the list is a jumbled mess.
I've coded around it by using the SelectMultiple widget, which still
allows editing of the list, but not in obvious ways to my users, and is
thus unacceptable.

I've attached images of the list using Django 3.2 and 4.2.
--
Ticket URL: <https://code.djangoproject.com/ticket/35409>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35409: CheckbioxMultipleSelect widget is broken

--------------------------------+--------------------------------------

Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "image-20240426-105033.png" added.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "image-20240426-105033.png" removed.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "recipient list 3.2.png" added.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "recipient list 3.2.2.png" removed.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "recipient list 4.2.png" added.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody
Type: Uncategorized | Status: new
Component: Uncategorized | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------
Changes (by Marc Gomillion):

* Attachment "recipient list 3.2.2.png" added.

[Django]

#35409: CheckbioxMultipleSelect widget is broken
--------------------------------+--------------------------------------
Reporter: Marc Gomillion | Owner: nobody

Type: Bug | Status: closed
Component: Forms | Version: 4.2
Severity: Normal | Resolution: worksforme

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--------------------------------+--------------------------------------

Changes (by Natalia Bidart):

* component: Uncategorized => Forms
* resolution: => worksforme
* status: new => closed
* type: Uncategorized => Bug


Old description:

> My application has an emailer page with a list of recipients that can be
> edited as follows.
>
> In the form definition:
> recipients =
> forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple)
>
> In __init__:
> self.fields['recipients'].choices = recipient_choices
>
> This has worked since 2009, but Django 4.2.x has broken it as it does not
> insert line breaks between the recipients and the list is a jumbled mess.
> I've coded around it by using the SelectMultiple widget, which still
> allows editing of the list, but not in obvious ways to my users, and is
> thus unacceptable.
>
> I've attached images of the list using Django 3.2 and 4.2.

New description:

My application has an emailer page with a list of recipients that can be
edited as follows.

In the form definition:
{{{
recipients =
forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple)
}}}

In `__init__`:
{{{
self.fields['recipients'].choices = recipient_choices
}}}

This has worked since 2009, but Django 4.2.x has broken it as it does not
insert line breaks between the recipients and the list is a jumbled mess.
I've coded around it by using the SelectMultiple widget, which still
allows editing of the list, but not in obvious ways to my users, and is
thus unacceptable.

I've attached images of the list using Django 3.2 and 4.2.

--

Comment:

Hello Marc! Thank you for your report. In order to do a proper triage of
this ticket, I need your help with the following:

1. Could you please confirm that this issue is present in the `main`
branch of the Django project?
2. Could you please provide a minimal reproducer with the form you used
and template?

A few things to note:

* Django 3.2 is no longer supported and Django 4.2 is on security-fixes-
only support mode.
* Django 4.1 introduced some transitional form renderer classes to ease
migration to 5.0 where there is a change in how the forms are rendered by
default (using `<div>`), please check the release notes for
[https://docs.djangoproject.com/en/dev/releases/4.1/#forms 4.1] and
[https://docs.djangoproject.com/en/dev/releases/5.0/#features-removed-
in-5-0 5.0].

I tried to reproduce this with no success. My form is as follows:

{{{#!python
from django import forms


class MyForm(forms.Form):
recipients =
forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple)

def __init__(self, *a, **kw):
super().__init__(*a, **kw)
recipient_choices = [(i, f"User {i} with email {i}@something") for
i in range(5)]

self.fields['recipients'].choices = recipient_choices
}}}

And when rendering it with `{{ form }}` in a Django template, I get a nice
looking form:

{{{#!html
<div>
<fieldset>
<legend>Recipients:</legend>

<div id="id_recipients"><div>
<label for="id_recipients_0"><input type="checkbox" name="recipients"
value="0" id="id_recipients_0">
User 0 with email 0@something</label>

</div><div>
<label for="id_recipients_1"><input type="checkbox" name="recipients"
value="1" id="id_recipients_1">
User 1 with email 1@something</label>

</div><div>
<label for="id_recipients_2"><input type="checkbox" name="recipients"
value="2" id="id_recipients_2">
User 2 with email 2@something</label>

</div><div>
<label for="id_recipients_3"><input type="checkbox" name="recipients"
value="3" id="id_recipients_3">
User 3 with email 3@something</label>

</div><div>
<label for="id_recipients_4"><input type="checkbox" name="recipients"
value="4" id="id_recipients_4">
User 4 with email 4@something</label>

</div>
</div></fieldset>

</div>
}}}

Closing as `worksforme` until a minimal reproducer or more information is
provided.
--
Ticket URL: <https://code.djangoproject.com/ticket/35409#comment:1>