[Django] #36468: Popup stays blank after adding a related object when filter_horizontal is used

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Type: Bug
Status: new | Component:
| contrib.admin
Version: 5.2 | Severity: Normal
Keywords: filter_horizontal; | Triage Stage:
SelectBox; add_to_cache; | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
When using the "Add another" popup for a ***ForeignKey field*** in the
Django admin and the same ModelAdmin has a ManyToManyField with
***filter_horizontal***, the popup window does not close properly after
adding the related object.

Instead, the popup remains open and white (blank), and the browser console
throws the following error:

{{{
:8000/static/admin/js/SelectBox.js:60 Uncaught TypeError: Cannot read
properties of undefined (reading 'push')
at Object.add_to_cache (:8000/static/admin/js/SelectBox.js:60:33)
at :8000/static/admin/j…ctLookups.js:115:31
at NodeList.forEach (<anonymous>)
at updateRelatedSelectsOptions
(:8000/static/admin/j…ctLookups.js:103:24)
at dismissAddRelatedObjectPopup
(:8000/static/admin/j…ctLookups.js:133:17)
at popup_response.js:12:16
add_to_cache @ :8000/static/admin/js/SelectBox.js:60
(anonymous) @ :8000/static/admin/j…bjectLookups.js:115
updateRelatedSelectsOptions @ :8000/static/admin/j…bjectLookups.js:103
dismissAddRelatedObjectPopup @ :8000/static/admin/j…bjectLookups.js:133
(anonymous) @ popup_response.js:12
}}}

This seems to be caused by this block in RelatedObjectLookups.js:

{{{
// Update SelectBox cache for related fields.
if (typeof SelectBox !== "undefined" && SelectBox.cache[currentSelect.id])
{
SelectBox.add_to_cache(select.id, option);
SelectBox.redisplay(select.id);
}
}}}


=== Steps to Reproduce
1. Register a ModelAdmin with:
* A ForeignKey field (with an "Add another" popup)
* A ManyToManyField using filter_horizontal

2. Click the "Add another" button next to the ForeignKey field
3. In the popup, add the new object and submit
4. The popup window stays open with a white screen
5. Console shows a JavaScript error from SelectBox.js


=== Expected Behavior
The popup should close normally and update the original select field with
the new object, as it does when filter_horizontal is not present.

=== Workaround
Commenting out or removing the SelectBox.add_to_cache and
SelectBox.redisplay lines in RelatedObjectLookups.js avoids the error and
restores expected behavior.

=== Version
* Django 5.2.X
* Reproducible in the default admin interface
--
Ticket URL: <https://code.djangoproject.com/ticket/36468>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------

Reporter: Juan Rocha | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 5.2

Severity: Normal | Resolution:

Keywords: filter_horizontal; | Triage Stage:
SelectBox; add_to_cache; | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Juan Rocha:

Old description:

New description:

=== Regression
This bug was introduced in commit:

https://github.com/django/django/commit/cd0479ff764272add5e0aba2afcf5649a241ca00

=== Expected Behavior
The popup should close normally and update the original select field with
the new object, as it does when filter_horizontal is not present.

=== Workaround
Commenting out or removing the SelectBox.add_to_cache and
SelectBox.redisplay lines in RelatedObjectLookups.js avoids the error and
restores expected behavior.

=== Version
* Django 5.2.X
* Reproducible in the default admin interface

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:1>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: (none)

Type: Bug | Status: closed

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:

| worksforme

Keywords: filter_horizontal; | Triage Stage:
SelectBox; add_to_cache; | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Natalia Bidart):

* resolution: => worksforme
* status: new => closed

Comment:

Hello Juan, thank you for your report. I'm not being able to reproduce:
I'm using the models from #35331 (`State` and `Transition`) and after your
step 3, the pop closes just fine.

Can you please share a test project or some tests so that we can replicate
and validate the issue?
--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:2>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: (none)
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
| worksforme
Keywords: filter_horizontal; | Triage Stage:
SelectBox; add_to_cache; | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Mark):

Hello Natalia und Juan,

I stumbled accross the same Problem, but the Example Juan suggested did
not work for me either.

In my case, the '+' Popup needs to be triggered from within an inline
Form. A minimal Example would look like this



Models:

{{{
from django.db import models


class Book(models.Model):
title = models.CharField()


class Article(models.Model):
title = models.CharField()
books = models.ManyToManyField(Book, blank=True)


class Author(models.Model):
name = models.CharField()


class Feature(models.Model):
title = models.CharField()
author = models.ForeignKey(Author, on_delete=models.CASCADE)
article = models.ForeignKey(Article, on_delete=models.CASCADE)

}}}

Admin:

{{{
from django.contrib import admin

from .models import Article, Author, Book, Feature



class FeatureInline(admin.TabularInline):
model = Feature


@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
inlines = [FeatureInline]
filter_horizontal = ["books"]


@admin.register(Author)
class AuthorAdmin(admin.ModelAdmin):
pass


@admin.register(Book)
class BookAdmin(admin.ModelAdmin):
pass


@admin.register(Feature)
class FeatureAdmin(admin.ModelAdmin):
pass

}}}

Trying to add an author in the Feature Inline will produce the bug
described by Juan.

A fix would be, to check, if the select input is managed by the SelectBox
(~ it has been initialized) in RelatedObjectLookups.js (line 114)

{{{
if (window.SelectBox !== undefined && !SelectBox.cache[currentSelect.id]
&& SelectBox.cache[select.id]) {
...
}
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:3>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: (none)

Type: Bug | Status: new

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:

Keywords: filter_horizontal; | Triage Stage: Accepted
SelectBox; add_to_cache; |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mark):

* resolution: worksforme =>
* stage: Unreviewed => Accepted
* status: closed => new

--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:4>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------

Reporter: Juan Rocha | Owner: Mark
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: filter_horizontal; | Triage Stage: Accepted
SelectBox; add_to_cache; |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Mark):

* owner: (none) => Mark
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:5>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: Mark
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: filter_horizontal; | Triage Stage: Accepted
SelectBox; add_to_cache; |

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Mark):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:6>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: Mark
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: filter_horizontal; | Triage Stage: Accepted
SelectBox; add_to_cache; |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Mark):

I've created a
[https://github.com/django/django/commit/35948edee45a1b80b53400c2feb8014b95762b72
test] and a
[https://github.com/django/django/commit/4f63bef87af56309eef1c97dd937bf4f5bf24a14
fix] at https://github.com/maqnius/django/tree/ticket_36468

{{{
./runtests.py --selenium=firefox -k
test_popup_closes_with_filter_horizontal
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:7>

[Django]

#36468: Popup stays blank after adding a related object when filter_horizontal is
used
-------------------------------------+-------------------------------------
Reporter: Juan Rocha | Owner: Mark
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: filter_horizontal; | Triage Stage: Accepted
SelectBox; add_to_cache; |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Mark):

After investigating more, I figured out, that any select other than the
triggered one, is affected by this. The inline is not necessary. Two
foreign keys to the same model have the same effect.

{{{
from django.db import models


class Child(models.Model):
name = models.CharField()


class Parent(models.Model):
name = models.CharField()
m2m = models.ManyToManyField(Child, blank=True)
fk1 = models.ForeignKey(Child, on_delete=models.CASCADE,
related_name="+")
fk2 = models.ForeignKey(Child, on_delete=models.CASCADE,
related_name="+")

}}}

I'll investigate, if this has any consequences for the bugfix.
--
Ticket URL: <https://code.djangoproject.com/ticket/36468#comment:8>