diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js index 78997d3e92..163a181736 100644 --- a/src/js/select2/selection/search.js +++ b/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; diff --git a/tests/selection/search-placeholder-tests.js b/tests/selection/search-placeholder-tests.js new file mode 100644 index 0000000000..cea761baa4 --- /dev/null +++ b/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 = $( + '
' + + '
' + + '
' + ); + 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' + ); + }); diff --git a/tests/selection/search-tests.js b/tests/selection/search-tests.js index 439b7ed61b..7a86cfbac3 100644 --- a/tests/selection/search-tests.js +++ b/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'); -}); \ No newline at end of file +}); diff --git a/tests/unit-jq1.html b/tests/unit-jq1.html index 1ef049c891..bdbe1e04fc 100644 --- a/tests/unit-jq1.html +++ b/tests/unit-jq1.html @@ -91,6 +91,7 @@ + diff --git a/tests/unit-jq2.html b/tests/unit-jq2.html index 031f113c13..e3f230231b 100644 --- a/tests/unit-jq2.html +++ b/tests/unit-jq2.html @@ -91,6 +91,7 @@ + diff --git a/tests/unit-jq3.html b/tests/unit-jq3.html index 4991d82b2d..d19a88df84 100644 --- a/tests/unit-jq3.html +++ b/tests/unit-jq3.html @@ -91,6 +91,7 @@ +