dismissRelatedLookupPopup doesn't trigger change event

[J. David Ibáñez]

I've a custom form with a field using ForeignKeyRawIdWidget (field1), and a select box (field2) dependent on field1.
I've some JS listening for change events in field1, when this happens field2 is updated.

The problem is, when field1 is chosen using the popup the change event is not triggered, so field2 is not updated.

This is easy to fix:

--- a/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
+++ b/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
@@ -49,6 +49,9 @@
         } else {
             document.getElementById(name).value = chosenId;
         }
+        var evt = document.createEvent("HTMLEvents");
+        evt.initEvent("change", false, true);
+        elem.dispatchEvent(evt);
         win.close();
     }

[Carlton Gibson]

Can you put a minimal project/page together showing this, and why you can't attach your own listener and such?
(It's a bit difficult to see exactly what's going on just from that diff...)
Thanks.

(I'm going to close for now as needsinfo. Please re-open when you have an example. Thanks!)

[Harm Geerts]

Example ​https://github.com/Urth/django-ticket-31170
Create a super user, runserver and navigate to ​http://127.0.0.1:8000/ticket_31170/article/add/

• Select a user with the RelatedLookupPopup looking glass button.
• Observe that nothing happens
• Change the user id yourself
• Observe the javascript alert

The desired behavior is implemented in dismissAddRelatedObjectPopup which uses the same approach as the patch below.

diff --git a/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js b/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
index 74d17bfc3e..16699da785 100644
--- a/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
+++ b/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
@@ -55,8 +55,10 @@
         if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
             elem.value += ',' + chosenId;
         } else {
-            document.getElementById(name).value = chosenId;
+            elem.value = chosenId;
         }
+        // Trigger a change event to update related fields if required.
+        $(elem).trigger('change');
         const index = relatedWindows.indexOf(win);
         if (index > -1) {
             relatedWindows.splice(index, 1);

[Harm Geerts]

The issue was observed in 3.0, but I tested on dev.

[Sarah Boyce]

Thank you for the test project Harm!

[Sarah Boyce <42296566+sarahboyce@…>]

In 91bebf1a:

Refs #31170 -- Added JavaScript tests for RelatedObjectLookups.js.

[Sarah Boyce <42296566+sarahboyce@…>]

In 51398f8b:

Fixed #31170 -- Added change event trigger to dismissRelatedLookupPopup.

[Sarah Boyce <42296566+sarahboyce@…>]

In 7cf6a34:

[5.2.x] Refs #31170 -- Added JavaScript tests for RelatedObjectLookups.js.

Backport of 91bebf1adb43561b54bac18e76224759dc70acb3 from main.

[Sarah Boyce <42296566+sarahboyce@…>]

In b0d497a:

[5.2.x] Fixed #31170 -- Added change event trigger to dismissRelatedLookupPopup.

Backport of 51398f8bd568a6324a8cafe20c068d0974913ad5 from main.