From 347f14e83b790ccd9df8b9b44a0110e1c68ce34d Mon Sep 17 00:00:00 2001
From: campersau <oliver.gaertner@biexcellence.com>
Date: Tue, 9 Jul 2019 19:35:10 -0400
Subject: [PATCH] Add `computedstyle` option for calculating the width

This allows for more accurate resolution of the width when compared
to the `resolve` method. This is more relevant for jQuery 1.x, where
the `resolve` method cannot find the width of a hidden select box,
but it also applies to newer versions of jQuery where the `width()`
method provided by jQuery doesn't fully match `getComputedStyle()`.

Fixes #3278
Fixes #5502
Closes #5259
---
 src/js/select2/core.js       |  6 ++++++
 tests/options/width-tests.js | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/js/select2/core.js b/src/js/select2/core.js
index 3d4ade2e80..92084143ac 100644
--- a/src/js/select2/core.js
+++ b/src/js/select2/core.js
@@ -162,6 +162,12 @@ define([
       return null;
     }
 
+    if (method == 'computedstyle') {
+      var computedStyle = window.getComputedStyle($element[0]);
+
+      return computedStyle.width;
+    }
+
     return method;
   };
 
diff --git a/tests/options/width-tests.js b/tests/options/width-tests.js
index e724034904..4f774b9cf8 100644
--- a/tests/options/width-tests.js
+++ b/tests/options/width-tests.js
@@ -64,3 +64,21 @@ test('resolve falls back to element if there is no style', function (assert) {
 
   assert.equal(width, '500px');
 });
+
+test('computedstyle gets the style if parent is invisible', function (assert) {
+  var $style = $(
+    '<style type="text/css">.css-set-width { width: 500px; }</style>'
+  );
+  var $test = $(
+    '<div style="display:none;">' +
+      '<select class="css-set-width"></select>' +
+    '</div>'
+  );
+
+  $('#qunit-fixture').append($style);
+  $('#qunit-fixture').append($test);
+
+  var width = select._resolveWidth($test.find('select'), 'computedstyle');
+
+  assert.equal(width, '500px');
+});