Fixed #36053 -- Fixed placement of FilteredSelectMultiple widget label.

2 files changed, 7 insertions, 5 deletions

diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js b/django/contrib/admin/static/admin/js/SelectFilter2.js
index 2100280220..fde59d3029 100644
--- a/django/contrib/admin/static/admin/js/SelectFilter2.js
+++ b/django/contrib/admin/static/admin/js/SelectFilter2.js
@@ -32,9 +32,8 @@ Requires core.js and SelectBox.js.
 
             // <div class="selector"> or <div class="selector stacked">
             const selector_div = quickElement('div', from_box.parentNode);
-            // Make sure the selector div is at the beginning so that the
-            // add link would be displayed to the right of the widget.
-            from_box.parentNode.prepend(selector_div);
+            // Make sure the selector div appears between the label and the add link.
+            from_box.parentNode.insertBefore(selector_div, from_box.nextSibling);
             selector_div.className = is_stacked ? 'selector stacked' : 'selector';
 
             // <div class="selector-available">
diff --git a/js_tests/admin/SelectFilter2.test.js b/js_tests/admin/SelectFilter2.test.js
index 533c24811c..9a020d2c53 100644
--- a/js_tests/admin/SelectFilter2.test.js
+++ b/js_tests/admin/SelectFilter2.test.js
@@ -10,8 +10,11 @@ QUnit.test('init', function(assert) {
     $('<div class="helptext">This is helpful.</div>').appendTo('#test');
     $('<select id="id"><option value="0">A</option></select>').appendTo('#test');
     SelectFilter.init('id', 'things', 0);
-    assert.equal($('#test').children().first().prop("tagName"), "DIV");
-    assert.equal($('#test').children().first().attr("class"), "selector");
+    assert.deepEqual(
+        Array.from($('#test')[0].children).map(child => child.tagName),
+        ["LABEL", "DIV", "DIV"]
+    );
+    assert.equal($('.helptext')[0].nextSibling.getAttribute("class"), "selector");
     assert.equal($('.selector-available label').text().trim(), "Available things");
     assert.equal($('.selector-available label').attr("id"), "id_from_label");
     assert.equal($('.selector-chosen label').text().trim(), "Chosen things");