fix tomselect layout bug in accordions

app/assets/javascripts/_selectize_turbolinks_fix.js

@@ -81,6 +81,28 @@ this.fillOptionsByAjax = function($selectizedSelection) {
         searchField: 'name',
         placeholder: placeholder,
         closeAfterSelect: true,
+        dropdownParent: document.body,
+        onInitialize:function(){
+          this.popper = Popper.createPopper(this.control,this.dropdown, {
+          placement: "bottom-start",
+          modifiers: [
+            {
+              name: "sameWidth",
+              enabled: true,
+              fn: ({ state }) => {
+                state.styles.popper.width = `${state.rects.reference.width}px`;
+            },
+            phase: "beforeWrite",
+            requires: ["computeStyles"],
+            }
+          ]
+
+        });
+
+        },
+        onDropdownOpen:function(){
+          this.popper.update();
+        },
         load: function(query, callback) {
           var url;
           if (send_data || !loaded) {

app/views/assignments/new.js.erb

@@ -0,0 +1,44 @@
+$('#newAssignmentButton').hide();
+
+$('#assignmentListHeader').show()
+  .after('<%= j render partial: "assignments/form", locals: { assignment: @assignment } %>');
+
+new TomSelect('#assignment_medium_id_', {
+  sortField: {
+    field: 'text',
+    direction: 'asc'
+  },
+  dropdownParent: document.body,
+  onInitialize:function(){
+    this.popper = Popper.createPopper(this.control,this.dropdown, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "sameWidth",
+        enabled: true,
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        }
+      ]
+
+  });
+  },
+  onDropdownOpen:function(){
+    this.popper.update();
+  },
+  render: {
+    no_results: function(data, escape) {
+      return '<div class="no-results"><%= t("basics.no_results") %></div>';
+    }
+  }
+});
+
+$('#assignment_medium_id_').val(null).trigger('change');
+
+$("#assignment_deadline_").datetimepicker({
+  format: 'd.m.Y H:i',
+  inline: false
+});

app/views/layouts/_head.html.erb

@@ -46,6 +46,7 @@
 </script>
 <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.default.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
 <!--[if lt IE 9]>
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
   </script>

app/views/submissions/select_tutorial.js.erb

@@ -0,0 +1,38 @@
+$('.submission-actions[data-id="<%= @submission.id %>"]').empty()
+  .append('<%= j render partial: "submissions/select_tutorial",
+                        locals: { submission: @submission,
+                                  lecture: @lecture,
+                                  tutorial: @tutorial } %>');
+
+new TomSelect('#submission_tutorial_id-<%= @submission.id %>', {
+  sortField: {
+    field: 'text',
+    direction: 'asc'
+  },
+  dropdownParent: document.body,
+  onInitialize:function(){
+    this.popper = Popper.createPopper(this.control,this.dropdown, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "sameWidth",
+        enabled: true,
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        }
+      ]
+
+  });
+  },
+  onDropdownOpen:function(){
+    this.popper.update();
+  },
+  render: {
+    no_results: function(data, escape) {
+      return '<div class="no-results"><%= t("basics.no_results") %></div>';
+    }
+  }
+});