1f3eceba5a
In order to enable the ability to uniquely identify a result by an ID in the DOM, we generate a new ID for the result based on a combination of things, including the container ID prefix that is generated and used elsewhere in Select2. This has worked fairly well for use cases including attaching Select2 to an existing `<select>` and loading in options from a remote data set. Unfortunately, because this process relied on the container ID being used as a prefix, this failed for options which were automatically generated on initialization using the `data:` option to Select2. These were not being generated with an ID because at the time that they were being generated, the data adapter was not aware of the container it was being used in. This broke some accessibility features because we had a mix of options in the results list with IDs, and some without, so we fixed the ordering to make this work. Option generation no longer happens when the data adapter is first initialized, which is where it was previously happening, and instead it now occurs when the data adapter is bound to the container. This allows us to ensure that the data adapter is always aware of the container it is being associated with, so now it will be able to generate the result IDs. This also fixes the tests for the array adapter as well as the legacy `<input />` adapter so they properly bind to a container during the test. This was causing test failures becuase the options which would previously be generated during initialization were no longer appearing. Fixes #4350
174 lines
3.3 KiB
JavaScript
174 lines
3.3 KiB
JavaScript
module('Data adapters - <input> compatibility');
|
|
|
|
var $ = require('jquery');
|
|
|
|
var Options = require('select2/options');
|
|
var Utils = require('select2/utils');
|
|
|
|
var ArrayData = require('select2/data/array');
|
|
var InputData = require('select2/compat/inputData');
|
|
|
|
var InputAdapter = Utils.Decorate(ArrayData, InputData);
|
|
|
|
test('test that options can be selected', function (assert) {
|
|
var options = new Options({
|
|
data: [
|
|
{
|
|
id: 'test',
|
|
text: 'Test'
|
|
}
|
|
]
|
|
});
|
|
var $element = $('<input />');
|
|
|
|
var adapter = new InputAdapter($element, options);
|
|
|
|
var container = new MockContainer();
|
|
adapter.bind(container, $('<div></div>'));
|
|
|
|
adapter.select({
|
|
id: 'test'
|
|
});
|
|
|
|
assert.equal(
|
|
$element.val(),
|
|
'test',
|
|
'The id of the item should be the value'
|
|
);
|
|
});
|
|
|
|
test('unselect the single selected option clears the value', function (assert) {
|
|
var options = new Options({
|
|
data: [
|
|
{
|
|
id: 'test',
|
|
text: 'Test',
|
|
selected: true
|
|
}
|
|
]
|
|
});
|
|
var $element = $('<input />');
|
|
|
|
var adapter = new InputAdapter($element, options);
|
|
|
|
var container = new MockContainer();
|
|
adapter.bind(container, $('<div></div>'));
|
|
|
|
adapter.unselect({
|
|
id: 'test'
|
|
});
|
|
|
|
assert.equal(
|
|
$element.val(),
|
|
'',
|
|
'The id should no longer be in the value'
|
|
);
|
|
});
|
|
|
|
test('options can be unselected individually', function (assert) {
|
|
var options = new Options({
|
|
data: [
|
|
{
|
|
id: 'test',
|
|
text: 'Test'
|
|
},
|
|
{
|
|
id: 'test2',
|
|
text: 'Test2'
|
|
},
|
|
{
|
|
id: 'test3',
|
|
text: 'Test3'
|
|
}
|
|
]
|
|
});
|
|
var $element = $('<input />');
|
|
$element.val('test,test2,test3');
|
|
|
|
var adapter = new InputAdapter($element, options);
|
|
|
|
var container = new MockContainer();
|
|
adapter.bind(container, $('<div></div>'));
|
|
|
|
adapter.unselect({
|
|
id: 'test2'
|
|
});
|
|
|
|
assert.equal(
|
|
$element.val(),
|
|
'test,test3',
|
|
'The value should contain all the still selected options'
|
|
);
|
|
});
|
|
|
|
test('default values can be set', function (assert) {
|
|
assert.expect(4);
|
|
|
|
var options = new Options({
|
|
data: [
|
|
{
|
|
id: 'test',
|
|
text: 'Test'
|
|
}
|
|
]
|
|
});
|
|
var $element = $('<input value="test" />');
|
|
|
|
var adapter = new InputAdapter($element, options);
|
|
|
|
var container = new MockContainer();
|
|
adapter.bind(container, $('<div></div>'));
|
|
|
|
adapter.current(function (data) {
|
|
assert.equal(
|
|
data.length,
|
|
1,
|
|
'There should only be a single selected option'
|
|
);
|
|
|
|
var item = data[0];
|
|
|
|
assert.equal(item.id, 'test');
|
|
assert.equal(item.text, 'Test');
|
|
});
|
|
|
|
assert.equal(
|
|
$element.val(),
|
|
'test',
|
|
'The value should not have been altered'
|
|
);
|
|
});
|
|
|
|
test('no default value', function (assert) {
|
|
assert.expect(2);
|
|
|
|
var options = new Options({
|
|
data: [
|
|
{
|
|
id: 'test',
|
|
text: 'Test'
|
|
}
|
|
]
|
|
});
|
|
var $element = $('<input />');
|
|
|
|
var adapter = new InputAdapter($element, options);
|
|
|
|
var container = new MockContainer();
|
|
adapter.bind(container, $('<div></div>'));
|
|
|
|
adapter.current(function (data) {
|
|
assert.equal(
|
|
data.length,
|
|
0,
|
|
'There should be no selected options'
|
|
);
|
|
});
|
|
|
|
assert.equal(
|
|
$element.val(),
|
|
'',
|
|
'The value should not have been altered'
|
|
);
|
|
});
|