Skip to content

Commit

Permalink
Revert change to focusing behaviour in 4.0.6
Browse files Browse the repository at this point in the history 
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 #5532
Fixes #5185
Closes #5552
  • Loading branch information
@kevin-brown
kevin-brown committed Jul 21, 2019
1 parent d926025 commit 67fb702
Show file tree
Hide file tree
Showing 5 changed files with 343 additions and 301 deletions.
6 changes: 2 additions & 4 deletions src/js/select2/selection/base.js
View file
Expand Up @@ -81,10 +81,8 @@ define([
self.$selection.removeAttr('aria-activedescendant');
self.$selection.removeAttr('aria-owns');

window.setTimeout(function () {
self.$selection.trigger('focus');
}, 0);

self.$selection.trigger('focus');

self._detachCloseHandler(container);
});

Expand Down
41 changes: 41 additions & 0 deletions tests/selection/focusing-tests.js
View file
@@ -0,0 +1,41 @@
module('Selection containers - Managing focus');

var SingleSelection = require('select2/selection/single');

var $ = require('jquery');
var Options = require('select2/options');

var options = new Options({});

test('close sets the focus to the selection', function (assert) {
var $container = $('#qunit-fixture .event-container');
var container = new MockContainer();
var selection = new SingleSelection(
$('#qunit-fixture .single'),
options
);

var $selection = selection.render();
selection.bind(container, $container);

selection.update([{
id: 'test',
text: 'test'
}]);

$container.append($selection);

assert.notEqual(
document.activeElement,
$selection[0],
'The selection had focus originally'
);

container.trigger('close');

assert.equal(
document.activeElement,
$selection[0],
'After close, focus must be set to selection'
);
});
199 changes: 100 additions & 99 deletions tests/unit-jq1.html
View file
@@ -1,99 +1,100 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="event-container">
<select></select>
</div>

<select class="single">
<option>One</option>
</select>

<select class="single-empty"></select>

<select class="single-with-placeholder">
<option>placeholder</option>
<option>One</option>
</select>

<select class="multiple" multiple="multiple">
<option>One</option>
<option>Two</option>
</select>

<select class="groups">
<optgroup label="Test">
<option value="one">One</option>
<option value="two">Two</option>
</optgroup>
<optgroup label="Empty"></optgroup>
</select>

<select class="duplicates">
<option value="one">One</option>
<option value="two">Two</option>
<option value="one">Uno</option>
</select>

<select class="duplicates-multi" multiple="multiple">
<option value="one">One</option>
<option value="two">Two</option>
<option value="one">Uno</option>
</select>

<select class="user-defined"></select>
</div>

<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
<script src="vendor/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../dist/js/select2.full.js" type="text/javascript"></script>

<script src="helpers.js" type="text/javascript"></script>

<script src="a11y/selection-tests.js" type="text/javascript"></script>
<script src="a11y/search-tests.js" type="text/javascript"></script>

<script src="data/array-tests.js" type="text/javascript"></script>
<script src="data/base-tests.js" type="text/javascript"></script>
<script src="data/inputData-tests.js" type="text/javascript"></script>
<script src="data/select-tests.js" type="text/javascript"></script>
<script src="data/tags-tests.js" type="text/javascript"></script>
<script src="data/tokenizer-tests.js" type="text/javascript"></script>

<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>

<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>

<script src="options/ajax-tests.js" type="text/javascript"></script>
<script src="options/data-tests.js" type="text/javascript"></script>
<script src="options/deprecated-tests.js" type="text/javascript"></script>
<script src="options/translation-tests.js" type="text/javascript"></script>
<script src="options/width-tests.js" type="text/javascript"></script>

<script src="results/focusing-tests.js" type="text/javascript"></script>
<script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
<script src="results/option-tests.js" type="text/javascript"></script>

<script src="selection/allowClear-tests.js" type="text/javascript"></script>
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
<script src="selection/multiple-tests.js" type="text/javascript"></script>
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
<script src="selection/search-tests.js" type="text/javascript"></script>
<script src="selection/single-tests.js" type="text/javascript"></script>
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>

<script src="utils/decorator-tests.js" type="text/javascript"></script>
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div class="event-container">
<select></select>
</div>

<select class="single">
<option>One</option>
</select>

<select class="single-empty"></select>

<select class="single-with-placeholder">
<option>placeholder</option>
<option>One</option>
</select>

<select class="multiple" multiple="multiple">
<option>One</option>
<option>Two</option>
</select>

<select class="groups">
<optgroup label="Test">
<option value="one">One</option>
<option value="two">Two</option>
</optgroup>
<optgroup label="Empty"></optgroup>
</select>

<select class="duplicates">
<option value="one">One</option>
<option value="two">Two</option>
<option value="one">Uno</option>
</select>

<select class="duplicates-multi" multiple="multiple">
<option value="one">One</option>
<option value="two">Two</option>
<option value="one">Uno</option>
</select>

<select class="user-defined"></select>
</div>

<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
<script src="vendor/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../dist/js/select2.full.js" type="text/javascript"></script>

<script src="helpers.js" type="text/javascript"></script>

<script src="a11y/selection-tests.js" type="text/javascript"></script>
<script src="a11y/search-tests.js" type="text/javascript"></script>

<script src="data/array-tests.js" type="text/javascript"></script>
<script src="data/base-tests.js" type="text/javascript"></script>
<script src="data/inputData-tests.js" type="text/javascript"></script>
<script src="data/select-tests.js" type="text/javascript"></script>
<script src="data/tags-tests.js" type="text/javascript"></script>
<script src="data/tokenizer-tests.js" type="text/javascript"></script>

<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>

<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>

<script src="options/ajax-tests.js" type="text/javascript"></script>
<script src="options/data-tests.js" type="text/javascript"></script>
<script src="options/deprecated-tests.js" type="text/javascript"></script>
<script src="options/translation-tests.js" type="text/javascript"></script>
<script src="options/width-tests.js" type="text/javascript"></script>

<script src="results/focusing-tests.js" type="text/javascript"></script>
<script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
<script src="results/option-tests.js" type="text/javascript"></script>

<script src="selection/allowClear-tests.js" type="text/javascript"></script>
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
<script src="selection/focusing-tests.js" type="text/javascript"></script>
<script src="selection/multiple-tests.js" type="text/javascript"></script>
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
<script src="selection/search-tests.js" type="text/javascript"></script>
<script src="selection/single-tests.js" type="text/javascript"></script>
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>

<script src="utils/decorator-tests.js" type="text/javascript"></script>
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
</body>
</html>

0 comments on commit 67fb702

Please sign in to comment.