Fix search box expanding width of container

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>