Re: [Django] #35331: Adding a new related entry using the "+" sign from M2M field doesn't update lists. (was: When adding a new related entry using the "+" sign from M2M field, no other widgets get updated.)

[Django]

#35331: Adding a new related entry using the "+" sign from M2M field doesn't update
lists.
-------------------------------+--------------------------------------
Reporter: devin13cox | Owner: devin13cox
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+--------------------------------------
Changes (by Mariusz Felisiak):

* stage: Unreviewed => Accepted
* summary:
When adding a new related entry using the "+" sign from M2M field, no
other widgets get updated.
=>
Adding a new related entry using the "+" sign from M2M field doesn't
update lists.


Old description:

> Related to Ticket #34789, PR https://github.com/django/django/pull/17897
>
> Models:
>

> {{{
> from django.db import models
>

> class State(models.Model):
> label = models.CharField(max_length=255)
>
> def __str__(self):
> return self.label
>

> class Transition(models.Model):
> source = models.ManyToManyField(State,
> related_name="transition_source")
> target = models.ForeignKey(State, related_name="transition_target",
> on_delete=models.CASCADE)
> }}}
>
> Admin:
>

> {{{
> from django.contrib import admin
>
> from .models import State, Transition
>

> class TransitionAdmin(admin.ModelAdmin):
> filter_horizontal = ['source']
>

> admin.site.register(State)
> admin.site.register(Transition, TransitionAdmin)
> }}}
>
> Steps to Reproduce:
>
> Add a `State` via the "+" on the M2M field to add to the `Chosen Source`
> column. We would expect the dropdown for the `Target` to contain the new
> value, but it does not.
>
> Resolution as suggested by @nessita on the provided PR:
>
> "For this, I tracked down the issue to the selector used in
> dismissAddRelatedObjectPopup to decide whether to call
> updateRelatedSelectsOptions or not. Basically the id used in the
> document.getElementById is wrong for the M2M widget (but correct for the
> single FK field, so we may need to fix the call site to pass the proper
> name)"
>

> {{{
> --- a/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
> +++ b/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
> @@ -119,7 +119,7 @@
>
> function dismissAddRelatedObjectPopup(win, newId, newRepr) {
> const name = removePopupIndex(win.name);
> - const elem = document.getElementById(name);
> + const elem = document.getElementById(name + '_from');
> if (elem) {
> const elemName = elem.nodeName.toUpperCase();
> if (elemName === 'SELECT') {
> }}}

New description:

Related to Ticket #34789, PR https://github.com/django/django/pull/17897

Models:


{{{
from django.db import models


class State(models.Model):
label = models.CharField(max_length=255)

def __str__(self):
return self.label


class Transition(models.Model):
source = models.ManyToManyField(State,
related_name="transition_source")
target = models.ForeignKey(State, related_name="transition_target",
on_delete=models.CASCADE)
}}}

Admin:


{{{
from django.contrib import admin

from .models import State, Transition


class TransitionAdmin(admin.ModelAdmin):
filter_horizontal = ['source']


admin.site.register(State)
admin.site.register(Transition, TransitionAdmin)
}}}

Steps to Reproduce:

Add a `State` via the "+" on the M2M field to add to the `Chosen Source`
column. We would expect the dropdown for the `Target` to contain the new
value, but it does not.

Resolution as suggested by @nessita on the provided PR:

"For this, I tracked down the issue to the selector used in
dismissAddRelatedObjectPopup to decide whether to call
updateRelatedSelectsOptions or not. Basically the id used in the
document.getElementById is wrong for the M2M widget (but correct for the
single FK field, so we may need to fix the call site to pass the proper
name)"


{{{
--- a/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
+++ b/django/contrib/admin/static/admin/js/admin/RelatedObjectLookups.js
@@ -119,7 +119,7 @@

function dismissAddRelatedObjectPopup(win, newId, newRepr) {
const name = removePopupIndex(win.name);
- const elem = document.getElementById(name);
+ const elem = document.getElementById(name + '_from');
if (elem) {
const elemName = elem.nodeName.toUpperCase();
if (elemName === 'SELECT') {
}}}

--
--
Ticket URL: <https://code.djangoproject.com/ticket/35331#comment:1>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.