diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 9ac43a2e22..a5a2a88f1d 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -13,6 +13,7 @@ - **Checkbox** - Added 4 new callbacks `beforeChecked`, `beforeUnchecked`, `beforeDeterminate`, `beforeIndeterminate`. You can now cancel a state change by returning false from these callbacks. - **Cards** - Added documentation for `stackable` cards which was available but undocumented in previous versions. - **Divider** - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808 +- **Dropdown** - Dropdown with user additions now will use custom templated messages to distinguish added choice from preselected choice #2923 - **Dropdown** - Dropdown will now automatically update selected values when hidden input value changes (so long as `change` event is triggered) #2626 - **Dropdown** - Dropdown using remote data, can now customize the property names returned by api call using `fields` (similar to search). - **Form Validation** - Added credit card validation, supports array of card types, and international cards including non luhn cards like China UnionPay #2729 diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 5243460633..1844d04101 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -181,10 +181,11 @@ $.fn.dropdown = function(parameters) { ; $.each(values, function(index, value) { if(module.get.item(value) === false) { - html = settings.templates.addition(value); + html = settings.templates.addition( module.add.variables(message.addResult, value) ); $userChoice = $('
') .html(html) - .data(metadata.value, value) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) .addClass(className.addition) .addClass(className.item) ; @@ -2019,6 +2020,14 @@ $.fn.dropdown = function(parameters) { module.verbose('Setting initial load'); initialLoad = true; }, + activeItem: function($item) { + if( settings.allowAdditions && $item.filter(selector.addition).length > 0 ) { + $item.addClass(className.filtered); + } + else { + $item.addClass(className.active); + } + }, scrollPosition: function($item, forceScroll) { var edgeTolerance = 5, @@ -2244,14 +2253,14 @@ $.fn.dropdown = function(parameters) { if(settings.useLabels) { module.add.value(selectedValue, selectedText, $selected); module.add.label(selectedValue, selectedText, shouldAnimate); - $selected.addClass(className.active); + module.set.activeItem($selected); module.filterActive(); module.select.nextAvailable($selectedItem); } else { module.add.value(selectedValue, selectedText, $selected); module.set.text(module.add.variables(message.count)); - $selected.addClass(className.active); + module.set.activeItem($selected); } } else if(!isFiltered) { @@ -2380,10 +2389,11 @@ $.fn.dropdown = function(parameters) { .removeClass(className.selected) ; if(hasUserSuggestion) { - html = settings.templates.addition(value); + html = settings.templates.addition( module.add.variables(message.addResult, value) ); $addition .html(html) - .data(metadata.value, value) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) .removeClass(className.filtered) .addClass(className.selected) ; @@ -2398,7 +2408,7 @@ $.fn.dropdown = function(parameters) { module.verbose('Adding item choice to menu corresponding with user choice addition', $addition); } }, - variables: function(message) { + variables: function(message, term) { var hasCount = (message.search('{count}') !== -1), hasMaxCount = (message.search('{maxCount}') !== -1), @@ -2417,7 +2427,7 @@ $.fn.dropdown = function(parameters) { message = message.replace('{maxCount}', settings.maxSelections); } if(hasTerm) { - query = module.get.query(); + query = term || module.get.query(); message = message.replace('{term}', query); } return message;