From 180a64626796a2a86862679ec69e8e9f0fa9a1da Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sat, 12 Oct 2024 21:06:52 +0100
Subject: [PATCH] remove select2 dependence on 'dropdownParent'

fixes an issue with dropdown options placement on smaller screens in modals.

Instead of 'dropdownParent', just set the z-index of the dropdown options to 9999 - above the modal.
---
 apps/home/templates/home/modals/editFilter.html | 2 +-
 apps/home/templates/home/modals/editStyle.html  | 4 ++--
 apps/home/templates/home/modals/editSub.html    | 8 ++++----
 static/css/select2.css                          | 5 +++++
 static/js/base.js                               | 4 +---
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/home/templates/home/modals/editFilter.html b/apps/home/templates/home/modals/editFilter.html
index 9c90ecc..64299c0 100644
--- a/apps/home/templates/home/modals/editFilter.html
+++ b/apps/home/templates/home/modals/editFilter.html
@@ -22,7 +22,7 @@
                         <div class="col-12">
                             <div class="mb-4">
                                 <label for="filterMatchingAlgorithm" class="form-label">Matching Algorithm</label>
-                                <select name="filterMatchingAlgorithm" id="filterMatchingAlgorithm" class="select-2" data-dropdownparent="#filterFormModal" data-field="matching_algorithm" tabindex="2"></select>
+                                <select name="filterMatchingAlgorithm" id="filterMatchingAlgorithm" class="select-2" data-field="matching_algorithm" tabindex="2"></select>
                                 <div class="form-text">The algorithm used to match against.</div>
                             </div>
                         </div>
diff --git a/apps/home/templates/home/modals/editStyle.html b/apps/home/templates/home/modals/editStyle.html
index 833ffc1..d5229c0 100644
--- a/apps/home/templates/home/modals/editStyle.html
+++ b/apps/home/templates/home/modals/editStyle.html
@@ -74,7 +74,7 @@
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4 mb-lg-0">
                                 <label for="styleTitleMutator" class="form-label">Title Mutator</label>
-                                <select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="title_mutator" tabindex="8">
+                                <select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-field="title_mutator" tabindex="8">
                                     <option value="">-----</option>
                                 </select>
                                 <div class="form-text">Modify the title in fun ways.</div>
@@ -83,7 +83,7 @@
                         <div class="col-lg-6 ps-lg-4">
                             <div class="">
                                 <label for="styleDescriptionMutator" class="form-label">Description Mutator</label>
-                                <select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="description_mutator" tabindex="9">
+                                <select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-field="description_mutator" tabindex="9">
                                     <option value="">-----</option>
                                 </select>
                                 <div class="form-text">Modify the description in fun ways.</div>
diff --git a/apps/home/templates/home/modals/editSub.html b/apps/home/templates/home/modals/editSub.html
index c472684..4fc96f1 100644
--- a/apps/home/templates/home/modals/editSub.html
+++ b/apps/home/templates/home/modals/editSub.html
@@ -29,7 +29,7 @@
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4">
                                 <label for="subMessageStyle" class="form-label">Message Style</label>
-                                <select name="subMessageStyle" id="subMessageStyle" class="select-2" data-dropdownparent="#subFormModal" data-field="message_style" data-default="firstOption" tabindex="3">
+                                <select name="subMessageStyle" id="subMessageStyle" class="select-2" data-field="message_style" data-default="firstOption" tabindex="3">
                                 </select>
                                 <div class="form-text">Appearance of delivered content.</div>
                             </div>
@@ -44,21 +44,21 @@
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4">
                                 <label for="subChannels" class="form-label">Channels</label>
-                                <select name="subChannels" id="subChannels" class="select-2" multiple data-dropdownparent="#subFormModal" data-field="channels" tabindex="5"></select>
+                                <select name="subChannels" id="subChannels" class="select-2" multiple data-field="channels" tabindex="5"></select>
                                 <div class="form-text">Send content to these channels.</div>
                             </div>
                         </div>
                         <div class="col-lg-6 ps-lg-4">
                             <div class="mb-4">
                                 <label for="subFilters" class="form-label">Filters</label>
-                                <select name="subFilters" id="subFilters" class="select-2" multiple data-dropdownparent="#subFormModal" data-field="filters" tabindex="6"></select>
+                                <select name="subFilters" id="subFilters" class="select-2" multiple data-field="filters" tabindex="6"></select>
                                 <div class="form-text">Filter out unwanted content.</div>
                             </div>
                         </div>
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4 mb-lg-0">
                                 <label for="subUniqueRules" class="form-label">Uniqueness Rules</label>
-                                <select name="subUniqueRules" id="subUniqueRules" class="select-2" multiple data-dropdownparent="#subFormModal" required data-field="unique_rules" tabindex="7"></select>
+                                <select name="subUniqueRules" id="subUniqueRules" class="select-2" multiple required data-field="unique_rules" tabindex="7"></select>
                                 <div class="form-text">Rules on telling content apart.</div>
                             </div>
                         </div>
diff --git a/static/css/select2.css b/static/css/select2.css
index c13abe5..59a53ee 100644
--- a/static/css/select2.css
+++ b/static/css/select2.css
@@ -1,5 +1,10 @@
 /* Select 2 */
 
+/* Keep the select2 options visible above modals */
+.select2-container--open {
+    z-index: 9999;
+}
+
 .select2-selection {
     background-color: var(--bs-body-bg) !important;
     font-size: 1rem !important;
diff --git a/static/js/base.js b/static/js/base.js
index 7ebe236..fdfb8ed 100644
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -52,11 +52,9 @@ $(document).ready(function() {
 
     // Activate select2s
     $(".select-2").each(function() {
-        var dropdownParent = $(this).attr("data-dropdownparent");
         $(this).select2({
             theme: "bootstrap",
-            minimumResultsForSearch: 10,
-            dropdownParent: dropdownParent
+            minimumResultsForSearch: 10
         });
     });