From f14bdf6b7bdfe5116bc18500e17bdc4ca52090a5 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Mon, 29 Jul 2019 22:25:19 -0400 Subject: [PATCH] Fix search box expanding width of container (#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 #5517 Closes #5518 --- src/js/select2/selection/search.js | 2 +- tests/selection/search-placeholder-tests.js | 55 +++++++++++++++++++++ tests/selection/search-tests.js | 2 +- tests/unit-jq1.html | 1 + tests/unit-jq2.html | 1 + tests/unit-jq3.html | 1 + 6 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 tests/selection/search-placeholder-tests.js diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js index 78997d3e..163a1817 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 00000000..cea761ba --- /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 439b7ed6..7a86cfba 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 1ef049c8..bdbe1e04 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 031f113c..e3f23023 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 4991d82b..d19a88df 100644 --- a/tests/unit-jq3.html +++ b/tests/unit-jq3.html @@ -91,6 +91,7 @@ +