Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
472e5ad
commit f14bdf6
Showing
6 changed files
with
60 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters