Fix for chooser modals with no tabs (layout & JS console error). Fix #9130 (#9159)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -35,6 +35,8 @@ Changelog
  * Fix: Ensure tag autocompletion dropdown has a solid background (LB (Ben) Johnston)
  * Fix: Allow inline panels to be ordered (LB (Ben) Johnston)
  * Fix: Only show draft / live status tags on snippets that have `DraftStateMixin` applied (Sage Abdullah)
+ * Fix: Prevent JS error when initialising chooser modals with no tabs (LB (Ben) Johnston)
+ * Fix: Add missing vertical spacing between chooser modal header and body when there are no tabs (LB (Ben) Johnston)
 
 
 4.0.1 (05.09.2022)

docs/releases/4.0.2.md

@@ -19,3 +19,5 @@ depth: 1
  * Ensure tag autocompletion dropdown has a solid background (LB (Ben) Johnston)
  * Allow inline panels to be ordered (LB (Ben) Johnston)
  * Only show draft / live status tags on snippets that have `DraftStateMixin` applied (Sage Abdullah)
+ * Prevent JS error when initialising chooser modals with no tabs (LB (Ben) Johnston)
+ * Add missing vertical spacing between chooser modal header and body when there are no tabs (LB (Ben) Johnston)

wagtail/admin/templates/wagtailadmin/generic/chooser/chooser.html

@@ -1,12 +1,13 @@
 {% load i18n wagtailadmin_tags %}
-{% include "wagtailadmin/shared/header.html" with title=page_title subtitle=page_subtitle merged=1 icon=header_icon %}
+{% include "wagtailadmin/shared/header.html" with title=page_title merged=1 subtitle=page_subtitle icon=header_icon %}
 
 {% if creation_form %}
     {{ creation_form.media.js }}
     {{ creation_form.media.css }}
 {% endif %}
 
-<div class="w-tabs" data-tabs data-tabs-disable-url>
+{% comment %} Do not attach JavaScript behaviour (data-tabs) below if there are no actual tabs used {% endcomment %}
+<div class="w-tabs" {% if creation_form %}data-tabs data-tabs-disable-url{% endif %}>
     {% if creation_form %}
         <div class="w-tabs__wrapper w-overflow-hidden">
             <div role="tablist" class="w-tabs__list w-w-full">
@@ -14,6 +15,9 @@
                 {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=view.creation_tab_id title=creation_tab_label %}
             </div>
         </div>
+    {% else %}
+        {% comment %} Ensure layout still works as expected (gap under header from tabs wrapper) even if no tabs used {% endcomment %}
+        <div class="w-tabs__wrapper"></div>
     {% endif %}
 
     <div class="tab-content">