Skip to content

Commit

Permalink
Merge pull request #1239 from zoglo/fix/tab-focus
Browse files Browse the repository at this point in the history 
Fix `tab` and `esc` keys handling
  • Loading branch information
@Xon
Xon authored Dec 21, 2024
2 parents a127f82 + 5ba92dd commit d659b75
Show file tree
Hide file tree
Showing 15 changed files with 131 additions and 71 deletions.
30 changes: 19 additions & 11 deletions public/assets/scripts/choices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
};

var KeyCodeMap = {
TAB_KEY: 9,
BACK_KEY: 46,
DELETE_KEY: 8,
ENTER_KEY: 13,
Expand Down Expand Up @@ -757,11 +758,15 @@
}
return undefined;
};
var mapInputToChoice = function (value, allowGroup) {
var mapInputToChoice = function (value, allowGroup, allowRawString) {
if (allowRawString === void 0) { allowRawString = true; }
if (typeof value === 'string') {
var sanitisedValue = sanitise(value);
var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
var result_1 = mapInputToChoice({
value: value,
label: value,
label: userValue,
selected: true,
}, false);
return result_1;
}
Expand Down Expand Up @@ -4312,6 +4317,7 @@
};
Choices.prototype._loadChoices = function () {
var _a;
var _this = this;
var config = this.config;
if (this._isTextElement) {
// Assign preset items from passed object first
Expand All @@ -4320,7 +4326,7 @@
if (this.passedElement.value) {
var elementItems = this.passedElement.value
.split(config.delimiter)
.map(function (e) { return mapInputToChoice(e, false); });
.map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });
this._presetChoices = this._presetChoices.concat(elementItems);
}
this._presetChoices.forEach(function (choice) {
Expand Down Expand Up @@ -4563,7 +4569,15 @@
var wasPrintableChar = event.key.length === 1 ||
(event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||
event.key === 'Unidentified';
if (!this._isTextElement && !hasActiveDropdown) {
/*
We do not show the dropdown if the keycode was tab or esc
as these one are used to focusOut of e.g. select choices.
An activated search can still be opened with any other key.
*/
if (!this._isTextElement &&
!hasActiveDropdown &&
keyCode !== KeyCodeMap.ESC_KEY &&
keyCode !== KeyCodeMap.TAB_KEY) {
this.showDropdown();
if (!this.input.isFocussed && wasPrintableChar) {
/*
Expand Down Expand Up @@ -4672,13 +4686,7 @@
if (!_this._canCreateItem(value)) {
return;
}
var sanitisedValue = sanitise(value);
var userValue = _this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
_this._addChoice(mapInputToChoice({
value: userValue,
label: userValue,
selected: true,
}, false), true, true);
_this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);
addedItem = true;
}
_this.clearInput();
Expand Down
2 changes: 1 addition & 1 deletion public/assets/scripts/choices.min.js
View file

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions public/assets/scripts/choices.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ var EventType = {
};

var KeyCodeMap = {
TAB_KEY: 9,
BACK_KEY: 46,
DELETE_KEY: 8,
ENTER_KEY: 13,
Expand Down Expand Up @@ -751,11 +752,15 @@ var stringToHtmlClass = function (input) {
}
return undefined;
};
var mapInputToChoice = function (value, allowGroup) {
var mapInputToChoice = function (value, allowGroup, allowRawString) {
if (allowRawString === void 0) { allowRawString = true; }
if (typeof value === 'string') {
var sanitisedValue = sanitise(value);
var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
var result_1 = mapInputToChoice({
value: value,
label: value,
label: userValue,
selected: true,
}, false);
return result_1;
}
Expand Down Expand Up @@ -4306,6 +4311,7 @@ var Choices = /** @class */ (function () {
};
Choices.prototype._loadChoices = function () {
var _a;
var _this = this;
var config = this.config;
if (this._isTextElement) {
// Assign preset items from passed object first
Expand All @@ -4314,7 +4320,7 @@ var Choices = /** @class */ (function () {
if (this.passedElement.value) {
var elementItems = this.passedElement.value
.split(config.delimiter)
.map(function (e) { return mapInputToChoice(e, false); });
.map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });
this._presetChoices = this._presetChoices.concat(elementItems);
}
this._presetChoices.forEach(function (choice) {
Expand Down Expand Up @@ -4557,7 +4563,15 @@ var Choices = /** @class */ (function () {
var wasPrintableChar = event.key.length === 1 ||
(event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||
event.key === 'Unidentified';
if (!this._isTextElement && !hasActiveDropdown) {
/*
We do not show the dropdown if the keycode was tab or esc
as these one are used to focusOut of e.g. select choices.
An activated search can still be opened with any other key.
*/
if (!this._isTextElement &&
!hasActiveDropdown &&
keyCode !== KeyCodeMap.ESC_KEY &&
keyCode !== KeyCodeMap.TAB_KEY) {
this.showDropdown();
if (!this.input.isFocussed && wasPrintableChar) {
/*
Expand Down Expand Up @@ -4666,13 +4680,7 @@ var Choices = /** @class */ (function () {
if (!_this._canCreateItem(value)) {
return;
}
var sanitisedValue = sanitise(value);
var userValue = _this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
_this._addChoice(mapInputToChoice({
value: userValue,
label: userValue,
selected: true,
}, false), true, true);
_this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);
addedItem = true;
}
_this.clearInput();
Expand Down
30 changes: 19 additions & 11 deletions public/assets/scripts/choices.search-basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
};

var KeyCodeMap = {
TAB_KEY: 9,
BACK_KEY: 46,
DELETE_KEY: 8,
ENTER_KEY: 13,
Expand Down Expand Up @@ -757,11 +758,15 @@
}
return undefined;
};
var mapInputToChoice = function (value, allowGroup) {
var mapInputToChoice = function (value, allowGroup, allowRawString) {
if (allowRawString === void 0) { allowRawString = true; }
if (typeof value === 'string') {
var sanitisedValue = sanitise(value);
var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
var result_1 = mapInputToChoice({
value: value,
label: value,
label: userValue,
selected: true,
}, false);
return result_1;
}
Expand Down Expand Up @@ -3830,6 +3835,7 @@
};
Choices.prototype._loadChoices = function () {
var _a;
var _this = this;
var config = this.config;
if (this._isTextElement) {
// Assign preset items from passed object first
Expand All @@ -3838,7 +3844,7 @@
if (this.passedElement.value) {
var elementItems = this.passedElement.value
.split(config.delimiter)
.map(function (e) { return mapInputToChoice(e, false); });
.map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });
this._presetChoices = this._presetChoices.concat(elementItems);
}
this._presetChoices.forEach(function (choice) {
Expand Down Expand Up @@ -4081,7 +4087,15 @@
var wasPrintableChar = event.key.length === 1 ||
(event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||
event.key === 'Unidentified';
if (!this._isTextElement && !hasActiveDropdown) {
/*
We do not show the dropdown if the keycode was tab or esc
as these one are used to focusOut of e.g. select choices.
An activated search can still be opened with any other key.
*/
if (!this._isTextElement &&
!hasActiveDropdown &&
keyCode !== KeyCodeMap.ESC_KEY &&
keyCode !== KeyCodeMap.TAB_KEY) {
this.showDropdown();
if (!this.input.isFocussed && wasPrintableChar) {
/*
Expand Down Expand Up @@ -4190,13 +4204,7 @@
if (!_this._canCreateItem(value)) {
return;
}
var sanitisedValue = sanitise(value);
var userValue = _this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
_this._addChoice(mapInputToChoice({
value: userValue,
label: userValue,
selected: true,
}, false), true, true);
_this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);
addedItem = true;
}
_this.clearInput();
Expand Down
2 changes: 1 addition & 1 deletion public/assets/scripts/choices.search-basic.min.js
View file

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions public/assets/scripts/choices.search-basic.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ var EventType = {
};

var KeyCodeMap = {
TAB_KEY: 9,
BACK_KEY: 46,
DELETE_KEY: 8,
ENTER_KEY: 13,
Expand Down Expand Up @@ -751,11 +752,15 @@ var stringToHtmlClass = function (input) {
}
return undefined;
};
var mapInputToChoice = function (value, allowGroup) {
var mapInputToChoice = function (value, allowGroup, allowRawString) {
if (allowRawString === void 0) { allowRawString = true; }
if (typeof value === 'string') {
var sanitisedValue = sanitise(value);
var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
var result_1 = mapInputToChoice({
value: value,
label: value,
label: userValue,
selected: true,
}, false);
return result_1;
}
Expand Down Expand Up @@ -3824,6 +3829,7 @@ var Choices = /** @class */ (function () {
};
Choices.prototype._loadChoices = function () {
var _a;
var _this = this;
var config = this.config;
if (this._isTextElement) {
// Assign preset items from passed object first
Expand All @@ -3832,7 +3838,7 @@ var Choices = /** @class */ (function () {
if (this.passedElement.value) {
var elementItems = this.passedElement.value
.split(config.delimiter)
.map(function (e) { return mapInputToChoice(e, false); });
.map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });
this._presetChoices = this._presetChoices.concat(elementItems);
}
this._presetChoices.forEach(function (choice) {
Expand Down Expand Up @@ -4075,7 +4081,15 @@ var Choices = /** @class */ (function () {
var wasPrintableChar = event.key.length === 1 ||
(event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||
event.key === 'Unidentified';
if (!this._isTextElement && !hasActiveDropdown) {
/*
We do not show the dropdown if the keycode was tab or esc
as these one are used to focusOut of e.g. select choices.
An activated search can still be opened with any other key.
*/
if (!this._isTextElement &&
!hasActiveDropdown &&
keyCode !== KeyCodeMap.ESC_KEY &&
keyCode !== KeyCodeMap.TAB_KEY) {
this.showDropdown();
if (!this.input.isFocussed && wasPrintableChar) {
/*
Expand Down Expand Up @@ -4184,13 +4198,7 @@ var Choices = /** @class */ (function () {
if (!_this._canCreateItem(value)) {
return;
}
var sanitisedValue = sanitise(value);
var userValue = _this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
_this._addChoice(mapInputToChoice({
value: userValue,
label: userValue,
selected: true,
}, false), true, true);
_this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);
addedItem = true;
}
_this.clearInput();
Expand Down
30 changes: 19 additions & 11 deletions public/assets/scripts/choices.search-prefix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
};

var KeyCodeMap = {
TAB_KEY: 9,
BACK_KEY: 46,
DELETE_KEY: 8,
ENTER_KEY: 13,
Expand Down Expand Up @@ -748,11 +749,15 @@
}
return undefined;
};
var mapInputToChoice = function (value, allowGroup) {
var mapInputToChoice = function (value, allowGroup, allowRawString) {
if (allowRawString === void 0) { allowRawString = true; }
if (typeof value === 'string') {
var sanitisedValue = sanitise(value);
var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
var result_1 = mapInputToChoice({
value: value,
label: value,
label: userValue,
selected: true,
}, false);
return result_1;
}
Expand Down Expand Up @@ -2672,6 +2677,7 @@
};
Choices.prototype._loadChoices = function () {
var _a;
var _this = this;
var config = this.config;
if (this._isTextElement) {
// Assign preset items from passed object first
Expand All @@ -2680,7 +2686,7 @@
if (this.passedElement.value) {
var elementItems = this.passedElement.value
.split(config.delimiter)
.map(function (e) { return mapInputToChoice(e, false); });
.map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });
this._presetChoices = this._presetChoices.concat(elementItems);
}
this._presetChoices.forEach(function (choice) {
Expand Down Expand Up @@ -2923,7 +2929,15 @@
var wasPrintableChar = event.key.length === 1 ||
(event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||
event.key === 'Unidentified';
if (!this._isTextElement && !hasActiveDropdown) {
/*
We do not show the dropdown if the keycode was tab or esc
as these one are used to focusOut of e.g. select choices.
An activated search can still be opened with any other key.
*/
if (!this._isTextElement &&
!hasActiveDropdown &&
keyCode !== KeyCodeMap.ESC_KEY &&
keyCode !== KeyCodeMap.TAB_KEY) {
this.showDropdown();
if (!this.input.isFocussed && wasPrintableChar) {
/*
Expand Down Expand Up @@ -3032,13 +3046,7 @@
if (!_this._canCreateItem(value)) {
return;
}
var sanitisedValue = sanitise(value);
var userValue = _this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
_this._addChoice(mapInputToChoice({
value: userValue,
label: userValue,
selected: true,
}, false), true, true);
_this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);
addedItem = true;
}
_this.clearInput();
Expand Down
2 changes: 1 addition & 1 deletion public/assets/scripts/choices.search-prefix.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit d659b75

Please sign in to comment.