From 73940d7d04f403a996a2fb1ec410b05ef4685f9d Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Wed, 19 Jul 2017 20:47:42 +0100 Subject: [PATCH] Set value of text element --- assets/scripts/src/choices.js | 114 +++++++++++++++++++++++----------- index.html | 6 +- 2 files changed, 79 insertions(+), 41 deletions(-) diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index acfc5f1..c00a59f 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -130,7 +130,9 @@ class Choices { if (this.config.renderSelectedChoices !== 'auto' && this.config.renderSelectedChoices !== 'always') { if (!this.config.silent) { - console.warn('renderSelectedChoices: Possible values are \'auto\' and \'always\'. Falling back to \'auto\'.'); + console.warn( + 'renderSelectedChoices: Possible values are \'auto\' and \'always\'. Falling back to \'auto\'.' + ); } this.config.renderSelectedChoices = 'auto'; } @@ -403,8 +405,10 @@ class Choices { if (this.isTextElement) { // Simplify store data to just values const itemsFiltered = this.store.getItemsReducedToValues(items); - // Assign hidden input array of values - this.passedElement.setAttribute('value', itemsFiltered.join(this.config.delimiter)); + const itemsFilteredString = itemsFiltered.join(this.config.delimiter); + // Update the value of the hidden input + this.passedElement.setAttribute('value', itemsFilteredString); + this.passedElement.value = itemsFilteredString; } else { const selectedOptionsFragment = document.createDocumentFragment(); @@ -544,7 +548,9 @@ class Choices { const groupId = item.groupId; const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; - this.store.dispatch(highlightItem(id, true)); + this.store.dispatch( + highlightItem(id, true) + ); if (runEvent) { if (group && group.value) { @@ -581,7 +587,9 @@ class Choices { const groupId = item.groupId; const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; - this.store.dispatch(highlightItem(id, false)); + this.store.dispatch( + highlightItem(id, false) + ); if (group && group.value) { triggerEvent(this.passedElement, 'unhighlightItem', { @@ -970,7 +978,9 @@ class Choices { * @public */ clearStore() { - this.store.dispatch(clearAll()); + this.store.dispatch( + clearAll() + ); return this; } @@ -988,7 +998,9 @@ class Choices { } if (!this.isTextElement && this.config.searchEnabled) { this.isSearching = false; - this.store.dispatch(activateChoices(true)); + this.store.dispatch( + activateChoices(true) + ); } return this; } @@ -1389,7 +1401,9 @@ class Choices { this.currentValue = newValue; this.highlightPosition = 0; this.isSearching = true; - this.store.dispatch(filterChoices(results)); + this.store.dispatch( + filterChoices(results) + ); } } @@ -1423,7 +1437,9 @@ class Choices { } else if (hasUnactiveChoices) { // Otherwise reset choices to active this.isSearching = false; - this.store.dispatch(activateChoices(true)); + this.store.dispatch( + activateChoices(true) + ); } } } @@ -1550,7 +1566,7 @@ class Choices { if (this.isTextElement && target.value) { const value = this.input.value; const canAddItem = this._canAddItem(activeItems, value); - + // All is good, add if (canAddItem.response) { if (hasActiveDropdown) { @@ -1710,7 +1726,9 @@ class Choices { // ...and it is a multiple select input, activate choices (if searching) if (!this.isTextElement && this.isSearching) { this.isSearching = false; - this.store.dispatch(activateChoices(true)); + this.store.dispatch( + activateChoices(true) + ); } } else if (this.canSearch && canAddItem.response) { this._handleSearch(this.input.value); @@ -2135,7 +2153,17 @@ class Choices { passedValue += this.config.appendValue.toString(); } - this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId, groupId, customProperties, passedKeyCode)); + this.store.dispatch( + addItem( + passedValue, + passedLabel, + id, + passedOptionId, + groupId, + customProperties, + passedKeyCode + ) + ); if (this.isSelectOneElement) { this.removeActiveItems(id); @@ -2180,7 +2208,9 @@ class Choices { const groupId = item.groupId; const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; - this.store.dispatch(removeItem(id, choiceId)); + this.store.dispatch( + removeItem(id, choiceId) + ); if (group && group.value) { triggerEvent(this.passedElement, 'removeItem', { @@ -2222,16 +2252,18 @@ class Choices { const choiceId = choices ? choices.length + 1 : 1; const choiceElementId = `${this.baseId}-${this.idNames.itemChoice}-${choiceId}`; - this.store.dispatch(addChoice( - value, - choiceLabel, - choiceId, - groupId, - isDisabled, - choiceElementId, - customProperties, - keyCode - )); + this.store.dispatch( + addChoice( + value, + choiceLabel, + choiceId, + groupId, + isDisabled, + choiceElementId, + customProperties, + keyCode + ) + ); if (isSelected) { this._addItem( @@ -2251,7 +2283,9 @@ class Choices { * @private */ _clearChoices() { - this.store.dispatch(clearChoices()); + this.store.dispatch( + clearChoices() + ); } /** @@ -2269,12 +2303,14 @@ class Choices { const isDisabled = group.disabled ? group.disabled : false; if (groupChoices) { - this.store.dispatch(addGroup( - group.label, - groupId, - true, - isDisabled - )); + this.store.dispatch( + addGroup( + group.label, + groupId, + true, + isDisabled + ) + ); groupChoices.forEach((option) => { const isOptDisabled = option.disabled || @@ -2293,12 +2329,14 @@ class Choices { ); }); } else { - this.store.dispatch(addGroup( - group.label, - group.id, - false, - group.disabled - )); + this.store.dispatch( + addGroup( + group.label, + group.id, + false, + group.disabled + ) + ); } } @@ -2598,12 +2636,16 @@ class Choices { this.config.classNames.hiddenState ); + // Remove element from tab index this.passedElement.tabIndex = '-1'; + // Backup original styles if any const origStyle = this.passedElement.getAttribute('style'); + if (Boolean(origStyle)) { this.passedElement.setAttribute('data-choice-orig-style', origStyle); } + this.passedElement.setAttribute('style', 'display:none;'); this.passedElement.setAttribute('aria-hidden', 'true'); this.passedElement.setAttribute('data-choice', 'active'); diff --git a/index.html b/index.html index 8f959c6..fb62df0 100644 --- a/index.html +++ b/index.html @@ -516,10 +516,6 @@ var boroughs = new Choices(document.getElementById('boroughs')).disable(); }); - - document.getElementById('choices-single-default').addEventListener('addItem', function (e) { - console.log(e) - }) @@ -532,4 +528,4 @@ - \ No newline at end of file +