Opened 2 hours ago

#36723 new Bug

Help text appears below FilteredSelectMultiple's select controls

Reported by: Jacob Walls Owned by:
Component: contrib.admin Version: 6.0
Severity: Normal Keywords:
Cc: Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

There is 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:

  • django/contrib/admin/static/admin/js/SelectFilter2.js

    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 b Requires core.js and SelectBox.js.  
    1818            from_box.setAttribute('aria-labelledby', field_id + '_from_label');
    1919            from_box.setAttribute('aria-describedby', `${field_id}_helptext ${field_id}_choose_helptext`);
    2020
    21             for (const p of from_box.parentNode.getElementsByTagName('p')) {
    22                 if (p.classList.contains("info")) {
    23                     // Remove <p class="info">, because it just gets in the way.
    24                     from_box.parentNode.removeChild(p);
    25                 } else if (p.classList.contains("help")) {
     21            const parentOfFlexContainer = from_box.parentNode.parentElement.parentElement;
     22            for (const div of parentOfFlexContainer.getElementsByTagName('div')) {
     23                if (div.classList.contains("info")) {
     24                    // Remove <div class="info">, because it just gets in the way.
     25                    parentOfFlexContainer.removeChild(div);
     26                } else if (div.classList.contains('help')) {
    2627                    // Move help text up to the top so it isn't below the select
    2728                    // boxes or wrapped off on the side to the right of the add
    2829                    // button:
    29                     from_box.parentNode.insertBefore(p, from_box.parentNode.firstChild);
     30                    parentOfFlexContainer.insertBefore(div, parentOfFlexContainer.firstChild);
    3031                }
    3132            }

In order to have:
.

Rather than:
.

To reproduce, just visit the admin, edit a user, view the permissions select widget, observe placement of the help text.

Attachments (2)

main.png (67.6 KB ) - added by Jacob Walls 2 hours ago.
patch.png (67.1 KB ) - added by Jacob Walls 2 hours ago.

Download all attachments as: .zip

Change History (2)

by Jacob Walls, 2 hours ago

Attachment: main.png added

by Jacob Walls, 2 hours ago

Attachment: patch.png added
Note: See TracTickets for help on using tickets.
Back to Top