Order of Jazzmin Installed Apps and Tabular Inline Editing of Foreign Keys

[Parthian]

This is a weird one.
In https://github.com/RamezIssac/my-shop/blob/main/my_shop/settings.py the installed apps has this.

    "erp_framework.admin.jazzmin_integration",
    "erp_framework.admin",
    "erp_framework.reporting",
    "slick_reporting",
    "jazzmin",

I have Tabular Inlines with Add Another ModelName.
With the above order of installed apps any ForeignKeys Select2 is inoperable. Clicks do nothing.
By chance on my local settings.py I changed the order of jazzmin as follows just so it was easier to comment out for tests.
On my local setup the Foreign Key Select2 boxes worked normally.
Whether it is worth investigating I'm not sure but a change to my-shop and docs would prevent this odd edge case.

    'erp_framework',
    "erp_framework.admin.jazzmin_integration", # if you want to use jazzmin theme, otherwise remove this line
    'jazzmin', # optional    
    'erp_framework.admin',
    'erp_framework.reporting',
    'slick_reporting',

[Parthian]

Update - I'll start again. Hopefully clearer.

'erp_framework',
'erp_framework.admin.jazzmin_integration', # No jazzmin means no reports. Select fine.
'erp_framework.reporting',
# 'jazzmin', # BEFORE erp_framework.admin. Select2 Works. Reports App Missing
'erp_framework.admin',
# 'jazzmin', # AFTER erp_framework.admin. Select2 Fails. Reports App Working
'slick_reporting',

The select2 is non-functional - clicks do nothing. This a FK within an inline. Where "Add another MODELNAME" has been clicked to expose this capability. A Select2 that already has content in a Change page works fine. Only Select2 in an inline is broken where there is no current content. The row of hyphens ------ .

Console shows this when a Select2 is failing.

jQuery.Deferred exception: $(...).collapse is not a functionhandleCollapsible@http://127.0.0.1:8000/static/jazzmin/js/change_form.js:94:48 @http://127.0.0.1:8000/static/jazzmin/js/change_form.js:135:58 e@https://code.jquery.com/jquery-3.7.0.min.js:2:26990 Deferred/then/l/</t<@https://code.jquery.com/jquery-3.7.0.min.js:2:27292 setTimeout handler*Deferred/then/l/<@https://code.jquery.com/jquery-3.7.0.min.js:2:27556 c@https://code.jquery.com/jquery-3.7.0.min.js:2:25266 fireWith@https://code.jquery.com/jquery-3.7.0.min.js:2:26015 fire@https://code.jquery.com/jquery-3.7.0.min.js:2:26051 c@https://code.jquery.com/jquery-3.7.0.min.js:2:25266 fireWith@https://code.jquery.com/jquery-3.7.0.min.js:2:26015 ready@https://code.jquery.com/jquery-3.7.0.min.js:2:29074 P@https://code.jquery.com/jquery-3.7.0.min.js:2:28846 EventListener.handleEvent*@https://code.jquery.com/jquery-3.7.0.min.js:2:29226 @https://code.jquery.com/jquery-3.7.0.min.js:2:220 @https://code.jquery.com/jquery-3.7.0.min.js:2:225 undefined[jquery-3.7.0.min.js:2:28610](https://code.jquery.com/jquery-3.7.0.min.js)

Uncaught TypeError: $(...).**collapse** is not a function
    handleCollapsible http://127.0.0.1:8000/static/jazzmin/js/change_form.js:94
    <anonymous> http://127.0.0.1:8000/static/jazzmin/js/change_form.js:135
    jQuery 13
[change_form.js:94:48](http://127.0.0.1:8000/static/jazzmin/js/change_form.js)
Source map error: Error: request failed with status 404 Resource URL: https://cdn.jsdelivr.net/npm/chart.js Source Map URL: chart.umd.js.map

Removal of the JazzminCollapsible setting results in the similar Uncaught error. 
Uncaught TypeError: $(...).**tab** is not a function
    handleTabs http://127.0.0.1:8000/static/jazzmin/js/change_form.js:64
    <anonymous> http://127.0.0.1:8000/static/jazzmin/js/change_form.js:133
    jQuery 13

Can't even guess what would cause that.

[Parthian]

Another Clue.
I have two installations. The local one I've setup so the Select2 fails (Reports are visible - erp_framework.admin then jazzmin) the production has a working Select2.
Comparing the network tab there are numerous differences but hard to predict as parts of the system won't be loaded due to the Uncaught Error.
But when Select2 fails there are 2 select2.min.js files loaded.
http://127.0.0.1:8000/static/vendor/select2/js/select2.min.js - /! Select2 4.1.0-rc.0 |
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js - /! Select2 4.0.13

On my production site the same happens when I change the order of jazzmin to make the select2 error. But the order the files are loaded is reversed (timey wimey stuff). So this isn't likely to be the culprit. There are 2 jquery files too - /static/admin/js/vendor/jquery/jquery.js - * jQuery JavaScript Library v3.6.4

That probably isn't the issue but maybe needs attention.

[Parthian]

And here is the code. For a Working Select2 that has content and hence works. And a Add New ModelName version which has no content.
The main difference I can see is that a working has an extra span with a class of selection.
And a number of classes differences - all of which may be perfectly normal.

UPDATE - just spotted an oddity. Fail has a Select within a Select.

<span class="select2 select2-container select2-container--default"
dir="ltr"
data-select2-id="15"
style="width: auto"

<span
class="select2 select2-container select2-container--default"
dir="ltr"
data-select2-id="15"
style="width: auto"
><span class="selection"

Works
<span class="select2 select2-container select2-container--default select2-container--above select2-container--focus"
  dir="ltr"
  data-select2-id="3"
  style="width: auto"
  ><span class="selection"
    ><span
      class="select2-selection select2-selection--single"
      role="combobox"
      aria-haspopup="true"
      aria-expanded="false"
      tabindex="0"
      aria-disabled="false"
      aria-labelledby="select2-id_location-container"
      ><span
        class="select2-selection__rendered"
        id="select2-id_location-container"
        role="textbox"
        aria-readonly="true"
        title="HQ"
        >HQ</span
      ><span class="select2-selection__arrow" role="presentation"
        ><b role="presentation"></b></span></span></span
  ><span class="dropdown-wrapper" aria-hidden="true"></span
></span>

Fails
<span class="select2 select2-container select2-container--default"
  dir="ltr"
  data-select2-id="15"
  style="width: auto"
  ><span
    class="select2 select2-container select2-container--default"
    dir="ltr"
    data-select2-id="15"
    style="width: auto"
    ><span class="selection"
      ><span
        class="select2-selection select2-selection--single"
        role="combobox"
        aria-haspopup="true"
        aria-expanded="false"
        tabindex="0"
        aria-disabled="false"
        aria-labelledby="select2-id_training_set-__prefix__-lms-container"
        ><span
          class="select2-selection__rendered"
          id="select2-id_training_set-1-lms-container"
          role="textbox"
          aria-readonly="true"
          title="---------"
          >---------</span
        ><span class="select2-selection__arrow" role="presentation"
          ><b role="presentation"></b></span></span></span
    ><span class="dropdown-wrapper" aria-hidden="true"></span></span
></span>

[Parthian]

I wonder if this is a Jazzmin issue? Or maybe a workaround is to find out why the order in installed_apps is critical.
The Select2 one embedded within another as shown above looks nasty to fix but maybe having jazzmin before erp_framework.admin then look into why reports are missing. Then mandate that order?

'jazzmin', # BEFORE erp_framework.admin. Select2 Works BUT Reports App Missing
'erp_framework.admin',
'jazzmin', # AFTER erp_framework.admin. Select2 Fails BUT Reports App Working