RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-30 00:26:03 +03:00
Code Issues Projects Releases Wiki Activity

improved tabbing and tabindex support as well as minor focus management tweaks. fixes things broken by #256

Browse Source
This commit is contained in:
Igor Vaynberg 2012-07-24 17:07:14 +03:00
parent 5d496bd470
commit e620b54271
1 changed files with 71 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
select2.js
View File

@ -853,7 +853,7 @@
this.clearDropdownAlignmentPreference(); this.clearDropdownAlignmentPreference();
this.dropdown.hide(); this.dropdown.hide();
this.container.removeClass("select2-dropdown-open"); this.container.removeClass("select2-dropdown-open").removeClass("select2-container-active");
this.results.empty(); this.results.empty();
this.clearSearch(); this.clearSearch();
@ -1194,6 +1194,7 @@
// single // single
opening: function () { opening: function () {
this.search.show();
this.parent.opening.apply(this, arguments); this.parent.opening.apply(this, arguments);
this.dropdown.removeClass("select2-offscreen"); this.dropdown.removeClass("select2-offscreen");
}, },
@ -1208,7 +1209,7 @@
// single // single
focus: function () { focus: function () {
this.close(); this.close();
this.container.focus(); this.selection.focus();
}, },
// single // single
@ -1219,7 +1220,7 @@
// single // single
cancel: function () { cancel: function () {
this.parent.cancel.apply(this, arguments); this.parent.cancel.apply(this, arguments);
this.container.focus(); this.selection.focus();
}, },
// single // single
@ -1258,7 +1259,27 @@
killEvent(e); killEvent(e);
return; return;
} }
} else {
if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
return;
} }
this.open();
if (e.which === KEY.ENTER) {
// do not propagate the event otherwise we open, and propagate enter which closes
return;
}
}
}));
this.search.bind("focus", this.bind(function() {
this.selection.attr("tabIndex", "-1");
}));
this.search.bind("blur", this.bind(function() {
if (!this.opened()) this.container.removeClass("select2-container-active");
window.setTimeout(this.bind(function() { this.selection.removeAttr("tabIndex"); }), 10);
})); }));
selection.bind("click", this.bind(function (e) { selection.bind("click", this.bind(function (e) {
@ -1266,7 +1287,7 @@
if (this.opened()) { if (this.opened()) {
this.close(); this.close();
this.container.focus(); this.selection.focus();
} else if (this.enabled) { } else if (this.enabled) {
this.open(); this.open();
} }
@ -1277,28 +1298,26 @@
dropdown.bind("click", this.bind(function() { this.search.focus(); })); dropdown.bind("click", this.bind(function() { this.search.focus(); }));
container.bind("focus", this.bind(function() { selection.bind("focus", this.bind(function() {
// allows the container to recieve the keyup event this.container.addClass("select2-container-active");
this.container.attr("tabindex", 1); // hide the search so the tab key does not focus on it
this.search.attr("tabIndex", "-1");
})); }));
container.bind("blur", this.bind(function() { selection.bind("blur", this.bind(function() {
// remove the tabindex so the tab key works properly this.container.removeClass("select2-container-active");
this.container.attr("tabindex", -1); window.setTimeout(this.bind(function() { this.search.removeAttr("tabIndex"); }), 10);
})); }));
container.bind("keydown", this.bind(function(e) { selection.bind("keydown", this.bind(function(e) {
if (!this.enabled) return; if (!this.enabled) return;
this.container.attr("tabindex", -1);
if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) { if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) {
// prevent the page from scrolling // prevent the page from scrolling
killEvent(e); killEvent(e);
return; return;
} }
if (!this.opened()) {
if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) { if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
return; return;
} }
@ -1311,6 +1330,13 @@
return; return;
} }
// do not set the search input value for non-alpha-numeric keys
// otherwise pressing down results in a '(' being set in the search field
if (e.which < 48 ) { // '0' == 48
killEvent(e);
return;
}
var keyWritten = String.fromCharCode(e.which).toLowerCase(); var keyWritten = String.fromCharCode(e.which).toLowerCase();
if (e.shiftKey) { if (e.shiftKey) {
@ -1318,7 +1344,9 @@
} }
this.search.val(keyWritten); this.search.val(keyWritten);
}
// prevent event propagation so it doesnt replay on the now focussed search field and result in double key entry
killEvent(e);
})); }));
selection.delegate("abbr", "click", this.bind(function (e) { selection.delegate("abbr", "click", this.bind(function (e) {
@ -1327,11 +1355,9 @@
killEvent(e); killEvent(e);
this.close(); this.close();
this.triggerChange(); this.triggerChange();
this.container.focus(); this.selection.focus();
})); }));
selection.bind("focus", this.bind(function() { this.search.focus(); }));
this.setPlaceholder(); this.setPlaceholder();
this.search.bind("focus", this.bind(function() { this.search.bind("focus", this.bind(function() {
@ -1440,7 +1466,7 @@
this.opts.element.val(this.id(data)); this.opts.element.val(this.id(data));
this.updateSelection(data); this.updateSelection(data);
this.close(); this.close();
this.container.focus(); this.selection.focus();
if (!equal(old, this.id(data))) { this.triggerChange(); } if (!equal(old, this.id(data))) { this.triggerChange(); }
}, },
@ -1632,6 +1658,10 @@
this.search.bind("keyup", this.bind(this.resizeSearch)); this.search.bind("keyup", this.bind(this.resizeSearch));
this.search.bind("blur", this.bind(function() {
this.container.removeClass("select2-container-active");
}));
this.container.delegate(selector, "click", this.bind(function (e) { this.container.delegate(selector, "click", this.bind(function (e) {
if (!this.enabled) return; if (!this.enabled) return;
this.clearPlaceholder(); this.clearPlaceholder();
@ -1734,7 +1764,7 @@
// multi // multi
focus: function () { focus: function () {
this.close(); this.close();
this.container.focus(); this.search.focus();
}, },
// multi // multi