From d1908ee07f3959abfdd1d317ff2fa3598a27579e Mon Sep 17 00:00:00 2001
From: "LB (Ben Johnston)" <mail@lb.ee>
Date: Tue, 13 Sep 2022 22:36:02 +1000
Subject: [PATCH] Fix for chooser modals with no tabs (layout & JS console
 error). Fix #9130 (#9159)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
 CHANGELOG.txt                                             | 2 ++
 docs/releases/4.0.2.md                                    | 2 ++
 .../templates/wagtailadmin/generic/chooser/chooser.html   | 8 ++++++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 07d80375e2..124cde41f0 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/docs/releases/4.0.2.md b/docs/releases/4.0.2.md
index 635e3fcf03..26833acfd0 100644
--- a/docs/releases/4.0.2.md
+++ b/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)
diff --git a/wagtail/admin/templates/wagtailadmin/generic/chooser/chooser.html b/wagtail/admin/templates/wagtailadmin/generic/chooser/chooser.html
index ff6dfb9a11..f067787ffd 100644
--- a/wagtail/admin/templates/wagtailadmin/generic/chooser/chooser.html
+++ b/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">