Skip to content

Commit 1b5a962

Browse files
kevin-brownkevin-brown
authored
Revert change to focusing behaviour in 4.0.6 (select2#5576)
This behaviour, where the focus was happening on a small asynchronous delay, was added in commit 933189b late last year in a commit with no supporting tickets or commit message explaining what the change was trying to accomplish. This commit has effectly been reverted within this commit, since it caused a regression in how focus was being assigned that made it inconsistent with a standard `<select>`. A test was added for this which ensures that we won't see that regression again. Fixes select2#5532 Fixes select2#5185 Closes select2#5552
1 parent d926025 commit 1b5a962

5 files changed

Lines changed: 343 additions & 301 deletions

File tree

‎src/js/select2/selection/base.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,8 @@ define([
8181
self.$selection.removeAttr('aria-activedescendant');
8282
self.$selection.removeAttr('aria-owns');
8383

84-
window.setTimeout(function () {
85-
self.$selection.trigger('focus');
86-
}, 0);
87-
84+
self.$selection.trigger('focus');
85+
8886
self._detachCloseHandler(container);
8987
});
9088

‎tests/selection/focusing-tests.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module('Selection containers - Managing focus');
2+
3+
var SingleSelection = require('select2/selection/single');
4+
5+
var $ = require('jquery');
6+
var Options = require('select2/options');
7+
8+
var options = new Options({});
9+
10+
test('close sets the focus to the selection', function (assert) {
11+
var $container = $('#qunit-fixture .event-container');
12+
var container = new MockContainer();
13+
var selection = new SingleSelection(
14+
$('#qunit-fixture .single'),
15+
options
16+
);
17+
18+
var $selection = selection.render();
19+
selection.bind(container, $container);
20+
21+
selection.update([{
22+
id: 'test',
23+
text: 'test'
24+
}]);
25+
26+
$container.append($selection);
27+
28+
assert.notEqual(
29+
document.activeElement,
30+
$selection[0],
31+
'The selection had focus originally'
32+
);
33+
34+
container.trigger('close');
35+
36+
assert.equal(
37+
document.activeElement,
38+
$selection[0],
39+
'After close, focus must be set to selection'
40+
);
41+
});

‎tests/unit-jq1.html‎

Lines changed: 100 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,100 @@
1-
<!doctype html>
2-
<html>
3-
<head>
4-
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
5-
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
6-
</head>
7-
<body>
8-
<div id="qunit"></div>
9-
<div id="qunit-fixture">
10-
<div class="event-container">
11-
<select></select>
12-
</div>
13-
14-
<select class="single">
15-
<option>One</option>
16-
</select>
17-
18-
<select class="single-empty"></select>
19-
20-
<select class="single-with-placeholder">
21-
<option>placeholder</option>
22-
<option>One</option>
23-
</select>
24-
25-
<select class="multiple" multiple="multiple">
26-
<option>One</option>
27-
<option>Two</option>
28-
</select>
29-
30-
<select class="groups">
31-
<optgroup label="Test">
32-
<option value="one">One</option>
33-
<option value="two">Two</option>
34-
</optgroup>
35-
<optgroup label="Empty"></optgroup>
36-
</select>
37-
38-
<select class="duplicates">
39-
<option value="one">One</option>
40-
<option value="two">Two</option>
41-
<option value="one">Uno</option>
42-
</select>
43-
44-
<select class="duplicates-multi" multiple="multiple">
45-
<option value="one">One</option>
46-
<option value="two">Two</option>
47-
<option value="one">Uno</option>
48-
</select>
49-
50-
<select class="user-defined"></select>
51-
</div>
52-
53-
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
54-
<script src="vendor/jquery-1.7.2.js" type="text/javascript"></script>
55-
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
56-
57-
<script src="helpers.js" type="text/javascript"></script>
58-
59-
<script src="a11y/selection-tests.js" type="text/javascript"></script>
60-
<script src="a11y/search-tests.js" type="text/javascript"></script>
61-
62-
<script src="data/array-tests.js" type="text/javascript"></script>
63-
<script src="data/base-tests.js" type="text/javascript"></script>
64-
<script src="data/inputData-tests.js" type="text/javascript"></script>
65-
<script src="data/select-tests.js" type="text/javascript"></script>
66-
<script src="data/tags-tests.js" type="text/javascript"></script>
67-
<script src="data/tokenizer-tests.js" type="text/javascript"></script>
68-
69-
<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
70-
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
71-
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
72-
73-
<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
74-
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
75-
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
76-
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
77-
78-
<script src="options/ajax-tests.js" type="text/javascript"></script>
79-
<script src="options/data-tests.js" type="text/javascript"></script>
80-
<script src="options/deprecated-tests.js" type="text/javascript"></script>
81-
<script src="options/translation-tests.js" type="text/javascript"></script>
82-
<script src="options/width-tests.js" type="text/javascript"></script>
83-
84-
<script src="results/focusing-tests.js" type="text/javascript"></script>
85-
<script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
86-
<script src="results/option-tests.js" type="text/javascript"></script>
87-
88-
<script src="selection/allowClear-tests.js" type="text/javascript"></script>
89-
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
90-
<script src="selection/multiple-tests.js" type="text/javascript"></script>
91-
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
92-
<script src="selection/search-tests.js" type="text/javascript"></script>
93-
<script src="selection/single-tests.js" type="text/javascript"></script>
94-
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
95-
96-
<script src="utils/decorator-tests.js" type="text/javascript"></script>
97-
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
98-
</body>
99-
</html>
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
5+
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
6+
</head>
7+
<body>
8+
<div id="qunit"></div>
9+
<div id="qunit-fixture">
10+
<div class="event-container">
11+
<select></select>
12+
</div>
13+
14+
<select class="single">
15+
<option>One</option>
16+
</select>
17+
18+
<select class="single-empty"></select>
19+
20+
<select class="single-with-placeholder">
21+
<option>placeholder</option>
22+
<option>One</option>
23+
</select>
24+
25+
<select class="multiple" multiple="multiple">
26+
<option>One</option>
27+
<option>Two</option>
28+
</select>
29+
30+
<select class="groups">
31+
<optgroup label="Test">
32+
<option value="one">One</option>
33+
<option value="two">Two</option>
34+
</optgroup>
35+
<optgroup label="Empty"></optgroup>
36+
</select>
37+
38+
<select class="duplicates">
39+
<option value="one">One</option>
40+
<option value="two">Two</option>
41+
<option value="one">Uno</option>
42+
</select>
43+
44+
<select class="duplicates-multi" multiple="multiple">
45+
<option value="one">One</option>
46+
<option value="two">Two</option>
47+
<option value="one">Uno</option>
48+
</select>
49+
50+
<select class="user-defined"></select>
51+
</div>
52+
53+
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
54+
<script src="vendor/jquery-1.7.2.js" type="text/javascript"></script>
55+
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
56+
57+
<script src="helpers.js" type="text/javascript"></script>
58+
59+
<script src="a11y/selection-tests.js" type="text/javascript"></script>
60+
<script src="a11y/search-tests.js" type="text/javascript"></script>
61+
62+
<script src="data/array-tests.js" type="text/javascript"></script>
63+
<script src="data/base-tests.js" type="text/javascript"></script>
64+
<script src="data/inputData-tests.js" type="text/javascript"></script>
65+
<script src="data/select-tests.js" type="text/javascript"></script>
66+
<script src="data/tags-tests.js" type="text/javascript"></script>
67+
<script src="data/tokenizer-tests.js" type="text/javascript"></script>
68+
69+
<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
70+
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
71+
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
72+
73+
<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
74+
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
75+
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
76+
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
77+
78+
<script src="options/ajax-tests.js" type="text/javascript"></script>
79+
<script src="options/data-tests.js" type="text/javascript"></script>
80+
<script src="options/deprecated-tests.js" type="text/javascript"></script>
81+
<script src="options/translation-tests.js" type="text/javascript"></script>
82+
<script src="options/width-tests.js" type="text/javascript"></script>
83+
84+
<script src="results/focusing-tests.js" type="text/javascript"></script>
85+
<script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
86+
<script src="results/option-tests.js" type="text/javascript"></script>
87+
88+
<script src="selection/allowClear-tests.js" type="text/javascript"></script>
89+
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
90+
<script src="selection/focusing-tests.js" type="text/javascript"></script>
91+
<script src="selection/multiple-tests.js" type="text/javascript"></script>
92+
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
93+
<script src="selection/search-tests.js" type="text/javascript"></script>
94+
<script src="selection/single-tests.js" type="text/javascript"></script>
95+
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
96+
97+
<script src="utils/decorator-tests.js" type="text/javascript"></script>
98+
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)