diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 3ed83b223..659d9e7e6 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -7,6 +7,7 @@ - **API** - Added `encodeParameters` option to enable/disable parameters being encoded with `encodeURIComponent` #2752 - **Button** - Added `labeled button` variation for display a count next to a button. - **Checkbox** - Added 4 new callbacks `beforeChecked`, `beforeUnchecked`, `beforeDeterminate`, `beforeIndeterminate`. You can now cancel a state change by returning false from these callbacks. +- **Dropdown** - Dropdown will now automatically update selected values when hidden input value changes (so long as `change` event is triggered) #2626 - **Label** - Added a new `basic label` style, works symbiotically with other label types to provide a more lightweight style label - **Form Validation** - Updated appearance of form validation prompts to use a more lightweight style. Added variables for controlling error validation prompt styles in `form.variables` - **Divider** - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808 diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index b943f982d..967b3178c 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -65,6 +65,7 @@ $.fn.dropdown = function(parameters) { activated = false, itemActivated = false, + internalChange = false, element = this, instance = $module.data(moduleNamespace), @@ -93,11 +94,7 @@ $.fn.dropdown = function(parameters) { module.restore.selected(); module.create.id(); - if(hasTouch) { - module.bind.touchEvents(); - } - module.bind.mouseEvents(); - module.bind.keyboardEvents(); + module.bind.events(); module.observeChanges(); module.instantiate(); @@ -388,7 +385,6 @@ $.fn.dropdown = function(parameters) { ; }, - toggle: function() { module.verbose('Toggling menu visibility'); if( !module.is.active() ) { @@ -465,8 +461,30 @@ $.fn.dropdown = function(parameters) { }, bind: { + events: function() { + if(hasTouch) { + module.bind.touchEvents(); + } + module.bind.keyboardEvents(); + module.bind.inputEvents(); + module.bind.mouseEvents(); + }, + touchEvents: function() { + module.debug('Touch device detected binding additional touch events'); + if( module.is.searchSelection() ) { + // do nothing special yet + } + else if( module.is.single() ) { + $module + .on('touchstart' + eventNamespace, module.event.test.toggle) + ; + } + $menu + .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + ; + }, keyboardEvents: function() { - module.debug('Binding keyboard events'); + module.verbose('Binding keyboard events'); $module .on('keydown' + eventNamespace, module.event.keydown) ; @@ -481,25 +499,17 @@ $.fn.dropdown = function(parameters) { ; } }, - touchEvents: function() { - module.debug('Touch device detected binding additional touch events'); - if( module.is.searchSelection() ) { - // do nothing special yet - } - else if( module.is.single() ) { - $module - .on('touchstart' + eventNamespace, module.event.test.toggle) - ; - } - $menu - .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + inputEvents: function() { + module.verbose('Binding input change events'); + $module + .on('change' + eventNamespace, selector.input, module.event.change) ; }, mouseEvents: function() { - module.debug('Mouse detected binding mouse events'); + module.verbose('Binding mouse events'); if(module.is.multiple()) { $module - .on('click' + eventNamespace, selector.label, module.event.label.click) + .on('click' + eventNamespace, selector.label, module.event.label.click) .on('click' + eventNamespace, selector.remove, module.event.remove.click) ; } @@ -783,6 +793,12 @@ $.fn.dropdown = function(parameters) { }, event: { + change: function() { + if(!internalChange) { + module.debug('Input changed, updating selection'); + module.set.selected(); + } + }, focus: function() { if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { module.show(); @@ -2146,6 +2162,7 @@ $.fn.dropdown = function(parameters) { module.add.optionValue(value); } module.debug('Updating input value', value, currentValue); + internalChange = true; $input .val(value) ; @@ -2155,6 +2172,7 @@ $.fn.dropdown = function(parameters) { else { $input.trigger('change'); } + internalChange = false; } else { module.verbose('Storing value in metadata', value, $input);