mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Update polyfill list (#765)
* Update polyfill list * Update eslintrc.json * Add keydown methods to types * Resolve type issue
This commit is contained in:
parent
214b6e80df
commit
592c326442
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1044,7 +1044,7 @@ I suggest including a polyfill from the very good [polyfill.io](https://polyfill
|
|||
**Polyfill example used for the demo:**
|
||||
|
||||
```html
|
||||
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest"></script>
|
||||
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
|
||||
```
|
||||
|
||||
**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
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
<!-- End ignore these -->
|
||||
|
||||
<!-- Optional includes -->
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2CArray.prototype.includes%2Cfetch%2CCustomEvent%2CElement.prototype.closest"></script>
|
||||
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
|
||||
<!-- End optional includes -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
|
|
|
@ -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);
|
||||
|
|
14
types/index.d.ts
vendored
14
types/index.d.ts
vendored
|
@ -780,6 +780,14 @@ declare namespace Choices {
|
|||
| ((template: Choices.Types.strToEl) => Partial<Choices.Templates>)
|
||||
| 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<Choices.KeyDownAction>): void;
|
||||
_onAKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||
_onEscapeKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||
_onDirectionKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||
_onDeleteKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue