Fix select2 widget so it works inside a Bootstrap modal

See https://select2.org/dropdown#dropdown-placement for details
sde1000 · Jun 25, 2024 · e4d6362 · e4d6362
1 parent 61875ea
commit e4d6362
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/quicktill/tillweb/templates/tillweb/select2_widget.html b/quicktill/tillweb/templates/tillweb/select2_widget.html
@@ -4,6 +4,13 @@
 </select>
 <script type="text/javascript">
   $(document).ready(function(){
-    $("#{{widget.attrs.id}}").select2({{widget.select2_args|safe}});
+      const s2w = $("#{{widget.attrs.id}}");
+      const args = {{widget.select2_args|safe}};
+      var dropdownParent = $(document.body);
+      if (s2w.parents('.modal:first').length !== 0) {
+          dropdownParent = s2w.parents('.modal:first');
+      }
+      args['dropdownParent'] = dropdownParent;
+      s2w.select2(args);
   });
 </script>