Fix search box expanding width of container (select2#5595)

This fixes a bug with the search box where, when it had a placeholder,
it would expand the width of the selection container because it was
too large. This bug was specifically caused by the search box not
factoring in the padding surrounding it when caclualting the width
it needed to be, which resulted in the search box extending
outside of the selection container. This bug was easy to notice if
your Select2 was set to have 100% width and if the container it was
held within was not a block element.

This fixes the bug by switching to using `width()` for calculating
the search width instead of using `innerWidth()`, which ignored the
surrounding padding.

Fixes select2#5517
Closes select2#5518

Author: kevin-brown

src/js/select2/selection/search.js

@@ -214,7 +214,7 @@ define([
     var width = '';
 
     if (this.$search.attr('placeholder') !== '') {
-      width = this.$selection.find('.select2-selection__rendered').innerWidth();
+      width = this.$selection.find('.select2-selection__rendered').width();
     } else {
       var minimumWidth = this.$search.val().length + 1;
 

tests/selection/search-placeholder-tests.js

@@ -0,0 +1,55 @@
+module('Selection containers - Inline search - Placeholder');
+
+var MultipleSelection = require('select2/selection/multiple');
+var InlineSearch = require('select2/selection/search');
+var SelectionPlaceholder = require('select2/selection/placeholder');
+
+var $ = require('jquery');
+var Options = require('select2/options');
+var Utils = require('select2/utils');
+
+var CustomSelection = Utils.Decorate(
+  Utils.Decorate(MultipleSelection, SelectionPlaceholder),
+  InlineSearch
+);
+
+test('width does not extend the search box', function (assert) {
+    assert.expect(2);
+
+    var $container = $(
+      '<div style="width: 100px; display: table-cell">' +
+      '<div style="width: 100%" ' +
+      'class="select2-container select2-container--default"></div>' +
+      '</div>'
+    );
+    var container = new MockContainer();
+
+    var $element = $('#qunit-fixture .multiple');
+    var selection = new CustomSelection($element, new Options({
+      placeholder: 'Test placeholder'
+    }));
+
+    var $selection = selection.render();
+    selection.bind(container, $container);
+
+    // Make it visible so the browser can place focus on the search
+    $container.append($selection);
+    $('#qunit-fixture').append($container);
+
+    // Update the selection so the search is rendered
+    selection.update([]);
+
+    var $search = $selection.find('input');
+
+    assert.equal(
+      $search.outerWidth(),
+      60,
+      'The search should not be the entire width of the container'
+    );
+
+    assert.equal(
+      $container.children().outerWidth(),
+      100,
+      'The container should be the width assigned to the parent in CSS'
+    );
+  });

tests/selection/search-tests.js

@@ -274,4 +274,4 @@ test('search box with text should not close dropdown', function (assert) {
   var $search = $selection.find('input');
   $search.val('test');
   $search.trigger('click');
-});
+});

tests/unit-jq1.html

@@ -91,6 +91,7 @@
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
+    <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
 

tests/unit-jq2.html

@@ -91,6 +91,7 @@
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
+    <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
 

tests/unit-jq3.html

@@ -91,6 +91,7 @@
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
+    <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>