f14bdf6b7b
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
56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
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'
|
|
);
|
|
});
|