#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.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/0107019a6f9837a1-6b1589d7-aa32-4990-94fe-7bd587311f45-000000%40eu-central-1.amazonses.com.
