From 24faf52b6ec9b76b671563c71dd7e7e6d123a538 Mon Sep 17 00:00:00 2001
From: Chris <chris.godwin.ala@gmail.com>
Date: Mon, 22 May 2023 17:30:41 +1000
Subject: [PATCH] Changed algorithm to size select2 inside tables to account
 for existing selections #189

---
 .../javascripts/forms-knockout-bindings.js    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/grails-app/assets/javascripts/forms-knockout-bindings.js b/grails-app/assets/javascripts/forms-knockout-bindings.js
index 0932581e..a9abfef8 100644
--- a/grails-app/assets/javascripts/forms-knockout-bindings.js
+++ b/grails-app/assets/javascripts/forms-knockout-bindings.js
@@ -452,26 +452,27 @@
         }
     };
 
-    function forceSelect2ToRespectPercentageTableWidths(element) {
-        var parentColumn = $(element).parent('td') && $(element).parent('td')[0];
+    function forceSelect2ToRespectPercentageTableWidths(element, percentageWidth) {
+        var $parentColumn = $(element).parent('td');
+        var $parentTable = $parentColumn.closest('table');
         var resizeHandler = null;
-        if (parentColumn) {
-            var $parentColumn = $(parentColumn);
+        if ($parentColumn.length) {
             var select2 = $parentColumn.find('.select2-container');
-            select2.css('max-width', $parentColumn.width()+'px');
-
+            function calculateWidth() {
+                var columnWidth = $parentTable.width()*percentageWidth/100;
+                select2.css('max-width', columnWidth+'px');
+            }
             var debounce = null;
             resizeHandler = function() {
                 clearTimeout(debounce);
-                setTimeout(function() {
-                    select2.css('max-width', $parentColumn.width()+'px');
-                }, 300);
+                setTimeout(calculateWidth, 300);
             };
             $(window).on('resize', resizeHandler);
 
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                 $(window).off('resize', resizeHandler);
             });
+            resizeHandler();
         }
 
     }
@@ -648,7 +649,7 @@
             });
 
             if (options.preserveColumnWidth) {
-                forceSelect2ToRespectPercentageTableWidths(element);
+                forceSelect2ToRespectPercentageTableWidths(element, options.preserveColumnWidth);
             }
 
             applySelect2ValidationCompatibility(element);