Fixes for select2 rendering issues

InvenTree/InvenTree/static/css/inventree.css

@@ -961,3 +961,15 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da
 .sidebar-icon {
     min-width: 19px;
 }
+
+.select2-close-mask {
+    z-index: 99999;
+}
+
+.select2-dropdown {
+    z-index: 99998;
+}
+
+.select2-container {
+    width: 100%;
+}

InvenTree/templates/js/forms.js

@@ -316,6 +316,11 @@ function constructFormBody(url, fields, options={}) {
     attachToggle(modal);
     // attachSelect(modal);
 
+    //$(modal + ' .select').select2();
+
+    $(modal + ' .select2-container').addClass('select-full-width');
+    $(modal + ' .select2-container').css('width', '100%');
+
     modalShowSubmitButton(modal, true);
 }
 
@@ -341,22 +346,23 @@ function initializeRelatedFields(modal, url, fields, options) {
         // Find the select element and attach a select2 to it
         var select = $(modal).find(`#id_${name}`);
 
+        console.log('modal:', modal);
+
         select.select2({
             ajax: {
                 url: field.api_url,
                 dataType: 'json',
                 dropdownParent: $(modal),
                 dropdownAutoWidth: false,
-                matcher: partialMatcher,
+                // matcher: partialMatcher,
                 data: function(params) {
                     // Re-format search term into InvenTree API style
-                    console.log('params;', params);
                     return {
                         search: params.term,
                     };
                 },
                 processResults: function(data) {
-
+                    // Convert the returned InvenTree data into select2-friendly format
                     var rows = [];
 
                     // Only ever show the first x items
@@ -367,53 +373,51 @@ function initializeRelatedFields(modal, url, fields, options) {
                         row.id = row.id || row.pk;
 
                         // TODO: Fix me?
-                        row.text = `This is ${url}/${row.id}/`;
+                        row.text = `This is ${field.api_url}${row.id}/`;
 
                         rows.push(row);
                     }
 
-                    console.log(rows);
-
                     // Ref: https://select2.org/data-sources/formats
                     var results = {
                         results: rows,
                     };
 
                     return results;
+                },
+                templateResult: function(item, container) {
+                    // Custom formatting for the item
+                    console.log("templateResult:", item);
+                    if (field.model) {
+                        // If the 'model' is specified, hand it off to the custom model render
+                        return renderModelData(field.model, item, field, options);
+                    } else {
+                        // Simply render the 'text' parameter
+                        return item.text;
+                    }
                 }
             }
         });
+    }
+}
 
 
-
-        //console.log('select:', select);
-
 /*
-        $.ajax({
+ * Render a "foreign key" model reference in a select2 instance.
-            url: url,
+ * Allows custom rendering with access to the entire serialized object.
-            type: 'GET',
+ * 
-            contentType: 'application/json',
+ * arguments:
-            dataType: 'json',
+ * - model: The name of the InvenTree model e.g. 'stockitem'
-            success: function(response) {
+ * - data: The JSON data representation of the modal instance (GET request)
-
+ * - parameters: The field definition (OPTIONS) request
-                // Create a new '
+ * - options: Other options provided at time of modal creation by the client
-                response.forEach(function(item) {
-
-                })
-
-            },
-            error: function(request, status, error) {
-                // TODO: Handle error
-                console.log(`ERROR in initializeRelatedFields at URL '${url}'`);
-            }
-        })
  */
-    }
+function renderModelData(model, data, paramaters, options) {
 
-    // Fix some styling issues
+    console.log(model, '->', data);
-    // TODO: Push this off to CSS!
+
-    $(modal + ' .select2-container').addClass('select-full-width');
+    // TODO: Implement?
-    $(modal + ' .select2-container').css('width', '100%');
+    return data.text;
 }
 
 

InvenTree/templates/modals.html

@@ -7,7 +7,7 @@
 
 </div>
 
-<div class='modal fade modal-fixed-footer modal-primary' tabindex='-1' role='dialog' id='modal-form'>
+<div class='modal fade modal-fixed-footer modal-primary' role='dialog' id='modal-form'>
     <div class='modal-dialog'>
         <div class='modal-content'>
             <div class="modal-header">
@@ -33,7 +33,7 @@
     </div>
 </div>
 
-<div class='modal fade modal-fixed-footer modal-secondary' tabindex='-1' role='dialog' id='modal-form-secondary'>
+<div class='modal fade modal-fixed-footer modal-secondary' role='dialog' id='modal-form-secondary'>
         <div class='modal-dialog'>
             <div class='modal-content'>
                 <div class="modal-header">
@@ -59,7 +59,7 @@
     </div>
 
 
-<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'>
+<div class='modal fade modal-fixed-footer' role='dialog' id='modal-question-dialog'>
         <div class='modal-dialog'>
             <div class='modal-content'>
                 <div class="modal-header">
@@ -79,7 +79,7 @@
         </div>
     </div>
 
-<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-alert-dialog'>
+<div class='modal fade modal-fixed-footer' role='dialog' id='modal-alert-dialog'>
     <div class='modal-dialog'>
         <div class='modal-content'>
             <div class="modal-header">