[Django] #36723: Help text appears below FilteredSelectMultiple's select controls

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls
-----------------------------+-----------------------------------------
Reporter: Jacob Walls | Type: Bug
Status: new | Component: contrib.admin
Version: 6.0 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-----------------------------+-----------------------------------------
There is
[https://github.com/django/django/blob/fffa64abc3870989d62659453cb302857c539956/django/contrib/admin/static/admin/js/SelectFilter2.js#L25-L30
code] in SelectFilter2.js that appears to reposition a help text for a
`FilteredSelectMultiple` above the controls, but it doesn't work for two
reasons:
- it searches for a help text in a `<p>` tag, but it became a `<div>` in
#27207
- to find the wanted help text today, it now would need to start its
search two parents higher (#34383 looks relevant, but I didn't verify if
already an issue before that)

In other words, if we want this code to work, it would need to be like:

{{{#!diff
diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js
b/django/contrib/admin/static/admin/js/SelectFilter2.js
index 2100280220..beb50fb5e2 100644
--- a/django/contrib/admin/static/admin/js/SelectFilter2.js
+++ b/django/contrib/admin/static/admin/js/SelectFilter2.js
@@ -18,15 +18,16 @@ Requires core.js and SelectBox.js.
from_box.setAttribute('aria-labelledby', field_id +
'_from_label');
from_box.setAttribute('aria-describedby',
`${field_id}_helptext ${field_id}_choose_helptext`);

- for (const p of
from_box.parentNode.getElementsByTagName('p')) {
- if (p.classList.contains("info")) {
- // Remove <p class="info">, because it just gets in
the way.
- from_box.parentNode.removeChild(p);
- } else if (p.classList.contains("help")) {
+ const parentOfFlexContainer =
from_box.parentNode.parentElement.parentElement;
+ for (const div of
parentOfFlexContainer.getElementsByTagName('div')) {
+ if (div.classList.contains("info")) {
+ // Remove <div class="info">, because it just gets in
the way.
+ parentOfFlexContainer.removeChild(div);
+ } else if (div.classList.contains('help')) {
// Move help text up to the top so it isn't below the
select
// boxes or wrapped off on the side to the right of
the add
// button:
- from_box.parentNode.insertBefore(p,
from_box.parentNode.firstChild);
+ parentOfFlexContainer.insertBefore(div,
parentOfFlexContainer.firstChild);
}
}
}}}

In order to have:
[[Image(patch.png)]].

Rather than:
[[Image(main.png)]].

To reproduce, just visit the admin, edit a user, view the permissions
select widget, observe placement of the help text.
--
Ticket URL: <https://code.djangoproject.com/ticket/36723>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls

-------------------------------+--------------------------------------
Reporter: Jacob Walls | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 6.0

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: 1

-------------------------------+--------------------------------------
Changes (by Jacob Walls):

* Attachment "main.png" added.

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls
-------------------------------+--------------------------------------
Reporter: Jacob Walls | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 6.0
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: 1
-------------------------------+--------------------------------------
Changes (by Jacob Walls):

* Attachment "patch.png" added.

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls
-------------------------------+------------------------------------

Reporter: Jacob Walls | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:

Keywords: | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+------------------------------------

Changes (by Antoliny):

* stage: Unreviewed => Accepted

Comment:

Thank you, Jacob.

It seems more appropriate for the help text to be positioned above the
widget, as it was before. We are also working on rearranging the order of
help text, field, and error messages.

- #34643
- https://github.com/django/django/pull/19713

For now, would it be better to move the help text to the top and then
remove the related code in PR #34643 later? The only concern is that, if
we leave it as is, only the `FilteredSelect` widget will have its help
text positioned above for the time being.
--
Ticket URL: <https://code.djangoproject.com/ticket/36723#comment:1>

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls

-------------------------------------+-------------------------------------
Reporter: Jacob Walls | Owner: Varun
| Kasyap Pentamaraju
Type: Bug | Status: assigned

Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Varun Kasyap Pentamaraju):

* owner: (none) => Varun Kasyap Pentamaraju
* status: new => assigned

Comment:

Willing to contribute
--
Ticket URL: <https://code.djangoproject.com/ticket/36723#comment:2>

[Django]

#36723: Help text appears below FilteredSelectMultiple's select controls
-------------------------------------+-------------------------------------
Reporter: Jacob Walls | Owner: Varun
| Kasyap Pentamaraju
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Varun Kasyap Pentamaraju):

* has_patch: 0 => 1

Comment:

https://github.com/django/django/pull/20077
--
Ticket URL: <https://code.djangoproject.com/ticket/36723#comment:3>