diff --git a/.eslintrc.json b/.eslintrc.json
index 1eabf5a..ad9bb6a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -86,10 +86,12 @@
"Array.prototype.includes",
"Symbol",
"Symbol.iterator",
+ "DOMTokenList",
"Object.assign",
"CustomEvent",
"Element.prototype.classList",
- "Element.prototype.closest"
+ "Element.prototype.closest",
+ "Element.prototype.dataset"
]
}
}
diff --git a/README.md b/README.md
index f573282..694130c 100644
--- a/README.md
+++ b/README.md
@@ -1044,7 +1044,7 @@ I suggest including a polyfill from the very good [polyfill.io](https://polyfill
**Polyfill example used for the demo:**
```html
-
+
```
**Features used in Choices:**
@@ -1055,10 +1055,12 @@ Array.prototype.find
Array.prototype.includes
Symbol
Symbol.iterator
+DOMTokenList
Object.assign
CustomEvent
Element.prototype.classList
Element.prototype.closest
+Element.prototype.dataset
```
## Development
diff --git a/public/index.html b/public/index.html
index 70bd8aa..a523de8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -47,7 +47,7 @@
-
+
diff --git a/src/scripts/choices.js b/src/scripts/choices.js
index 1d69104..5e05e21 100644
--- a/src/scripts/choices.js
+++ b/src/scripts/choices.js
@@ -1321,7 +1321,7 @@ class Choices {
* @param {KeyboardEvent} event
*/
_onKeyDown(event) {
- const { target, keyCode, ctrlKey, metaKey } = event;
+ const { keyCode } = event;
const { activeItems } = this._store;
const hasFocusedInput = this.input.isFocussed;
const hasActiveDropdown = this.dropdown.isActive;
@@ -1339,7 +1339,6 @@ class Choices {
PAGE_UP_KEY,
PAGE_DOWN_KEY,
} = KEY_CODES;
- const hasCtrlDownKeyPressed = ctrlKey || metaKey;
// If a user is typing and the dropdown is not active
if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
@@ -1363,14 +1362,10 @@ class Choices {
if (keyDownActions[keyCode]) {
keyDownActions[keyCode]({
event,
- target,
- keyCode,
- metaKey,
activeItems,
hasFocusedInput,
hasActiveDropdown,
hasItems,
- hasCtrlDownKeyPressed,
});
}
}
@@ -1409,7 +1404,9 @@ class Choices {
this._canSearch = this.config.searchEnabled;
}
- _onAKey({ hasItems, hasCtrlDownKeyPressed }) {
+ _onAKey({ event, hasItems }) {
+ const { ctrlKey, metaKey } = event;
+ const hasCtrlDownKeyPressed = ctrlKey || metaKey;
// If CTRL + A or CMD + A have been pressed and there are items to select
if (hasCtrlDownKeyPressed && hasItems) {
this._canSearch = false;
@@ -1425,7 +1422,8 @@ class Choices {
}
}
- _onEnterKey({ event, target, activeItems, hasActiveDropdown }) {
+ _onEnterKey({ event, activeItems, hasActiveDropdown }) {
+ const { target } = event;
const { ENTER_KEY: enterKey } = KEY_CODES;
const targetWasButton = target.hasAttribute('data-button');
@@ -1473,7 +1471,8 @@ class Choices {
}
}
- _onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) {
+ _onDirectionKey({ event, hasActiveDropdown }) {
+ const { keyCode, metaKey } = event;
const {
DOWN_KEY: downKey,
PAGE_UP_KEY: pageUpKey,
@@ -1536,7 +1535,8 @@ class Choices {
}
}
- _onDeleteKey({ event, target, hasFocusedInput, activeItems }) {
+ _onDeleteKey({ event, hasFocusedInput, activeItems }) {
+ const { target } = event;
// If backspace or delete key is pressed and the input has no value
if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
this._handleBackspace(activeItems);
diff --git a/types/index.d.ts b/types/index.d.ts
index abe198d..d3520bd 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -780,6 +780,14 @@ declare namespace Choices {
| ((template: Choices.Types.strToEl) => Partial)
| null;
}
+
+ interface KeyDownAction {
+ event: KeyboardEvent;
+ activeItems: Item[];
+ hasFocusedInput: boolean;
+ hasActiveDropdown: boolean;
+ hasItems: boolean;
+ }
}
// Exporting default class
@@ -1024,4 +1032,10 @@ export default class Choices {
* **Input types affected:** text, select-one, select-multiple
*/
disable(): this;
+
+ _onEnterKey(keyDownAction: Partial): void;
+ _onAKey(keyDownAction: Partial): void;
+ _onEscapeKey(keyDownAction: Partial): void;
+ _onDirectionKey(keyDownAction: Partial): void;
+ _onDeleteKey(keyDownAction: Partial): void;
}