Using collapse class in ModelAdmin fieldset while using the same media file in ModelAdmin's and its inline's form causes wrong media ordering

[Krzysztof Socha]

Affects Django 2.0 and 2.1. Does not affect master (or at least I couldn't reproduce the problem given steps below, as its collapse.js no longer depends on jQuery).

Steps to reproduce:

• Create a model admin with an inline
• Use the same media file in model admin and inline field (to simplify, use the same widget)
• Set collapse class on a model admin fieldset

Code snippets:

# models.py
from django.db import models


class Parent(models.Model):
    text = models.CharField(max_length=100)


class Child(models.Model):
    parent = models.ForeignKey(Parent, on_delete=models.CASCADE)
    text = models.CharField(max_length=100)

# admin.py
from django import forms
from django.contrib import admin
from django.db import models

from .models import Child, Parent


class TestWidget(forms.TextInput):
    class Media:
        js = ("foo.js",)


class ChildInline(admin.StackedInline):
    model = Child
    formfield_overrides = {models.CharField: {"widget": TestWidget}}


@admin.register(Parent)
class ParentAdmin(admin.ModelAdmin):
    inlines = [ChildInline]
    fieldsets = (
        ("Fieldset", {
            "classes": ("collapse",),
            "fields": ("text",)
        }),
    )
    formfield_overrides = {models.CharField: {"widget": TestWidget}}

Expected result:

• Following order of JS files:

  <script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
  <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
  <script type="text/javascript" src="/static/admin/js/core.js"></script>
  <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
  <script type="text/javascript" src="/static/admin/js/actions.js"></script>
  <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
  <script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
  <script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
  <script type="text/javascript" src="/static/admin/js/collapse.js"></script>
  <script type="text/javascript" src="/static/admin/js/inlines.js"></script>
  <script type="text/javascript" src="/static/foo.js"></script>
  

• Change view scripts work correctly (inlines handling specifically)

Actual result:

• A warning is emitted:

  .../django/forms/widgets.py:126: MediaOrderConflictWarning: Detected duplicate Media files in an opposite order:
  admin/js/inlines.js
  admin/js/jquery.init.js
    MediaOrderConflictWarning,
  

• JS error shown in the console:

  inlines.js:20 Uncaught TypeError: Cannot read property 'fn' of undefined
      at inlines.js:20
      at inlines.js:298
  

• "Add new Child" button doesn't appear
• admin/js/inlines.js is loaded before admin/js/vendor/jquery/jquery.js
• Actual order of JS files:

  <script type="text/javascript" src="/static/admin/js/inlines.js"></script>
  <script type="text/javascript" src="/static/foo.js"></script>
  <script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
  <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
  <script type="text/javascript" src="/static/admin/js/core.js"></script>
  <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
  <script type="text/javascript" src="/static/admin/js/actions.js"></script>
  <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
  <script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
  <script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
  <script type="text/javascript" src="/static/admin/js/collapse.js"></script>
  

Additional notes:

The issue only occurs if Fieldset.media includes files that aren't in InlineModelAdmin.media (which is only the case if modeladmin has a collapsed fieldset and inline isn't collapsed).

[Carlton Gibson]

Hi Krzysztof.

Do you have a fix in mind?

I ask because I'm not sure it qualifies for a backport and if it's already fixed in master it'll be gone for v2.2...

It might be that it's just a wontfix at this point.

[Krzysztof Socha]

I'm fairly certain the following is too naive to be a proper fix (+ test): ​https://github.com/django/django/compare/stable/2.1.x...chaosk:bugfix/30026-collapse-inline-media-issue

I don't have any ideas other than that though.

[Carlton Gibson]

Thanks for the test-case. As you said, it doesn't reproduce on master so I'll going to go for needsinfo here: I can't quickly see why the jQuery dependency should really be relevant, so I'd guess we could come up with a similar case that failed on master, but without that it's hard to proceed.

Happy to reopen if someone can recreate the issue against master.