From 1c8d229aeb5722d3952631905b2762a926d95f81 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 29 Apr 2016 11:44:06 -0400 Subject: [PATCH] Finally add selection on keyboard shortcut --- RELEASE-NOTES.md | 1 + src/definitions/modules/dropdown.js | 55 +++++++++++++++++------------ 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 63cb8a518..de713f488 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -6,6 +6,7 @@ - **Webpack** - Modified all relative paths in project to prefix with `./` to make them webpack friendly (wont be misinterpreted as module) - **Popup** - Added new setting `boundary` and `scrollContext. `boundary` lets you specify an element that the popup will try to position itself to be contained inside of. `scrollContext` lets you specify the element which when scrolled should hide the popup - **Popup** - Added new settings `autoRemove`, which is enabled by default. This will add special event listeners to auto hide a popup if the triggering element is removed from the DOM. This is useful in controlled DOM environments like Meteor/Ember/React to ensure a popup auto-hides itself when a page navigation or other DOM change occurs that may not trigger `mouseout`. +- **Dropdown** - Dropdown now changes user selection on keyboard shortcuts **immediately**, this will save the extra `enter` key press to confirm selection in most cases. To enable previous pre `2.2` selection style use the setting `selectOnShortcut: false` - **Dropdown** - Multiple select dropdown now sizes current dropdown input based on rendered width of a hidden element, not using an estimate based on character count. This means search will never break to a second line earlier than would normally fit in current line. - **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state `empty` which will format an active dropdown with empty results. #3791 - **Dropdown** - Adds new `allowReselection` option to trigger `onChange` events even when reselecting same value ***NEEEDS DOCUMENTATION*** diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index de90e6e47..2de92d8ea 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -848,26 +848,20 @@ $.fn.dropdown = function(parameters) { : $activeItem, hasSelected = ($selectedItem.size() > 0) ; - if( module.has.query() ) { - if(hasSelected) { - module.debug('Forcing partial selection to selected item', $selectedItem); - module.event.item.click.call($selectedItem, {}, true); - return; + if(hasSelected) { + module.debug('Forcing partial selection to selected item', $selectedItem); + module.event.item.click.call($selectedItem, {}, true); + return; + } + else { + if(settings.allowAdditions) { + module.set.selected(module.get.query()); + module.remove.searchTerm(); } else { - if(settings.allowAdditions) { - module.set.selected(module.get.query()); - module.remove.searchTerm(); - } - else { - module.remove.searchTerm(); - } + module.remove.searchTerm(); } } - if(pageLostFocus) { - return; - } - module.hide(); }, event: { @@ -936,14 +930,10 @@ $.fn.dropdown = function(parameters) { pageLostFocus = (document.activeElement === this); if(!willRefocus) { if(!itemActivated && !pageLostFocus) { - if(settings.forceSelection) { - module.forceSelection(); - } - } - else if(pageLostFocus) { - if(settings.forceSelection) { + if(settings.forceSelection && module.has.query()) { module.forceSelection(); } + module.hide(); } } willRefocus = false; @@ -1339,6 +1329,9 @@ $.fn.dropdown = function(parameters) { .addClass(className.selected) ; module.set.scrollPosition($nextItem); + if(settings.selectOnShortcut && module.is.single()) { + module.set.selectedItem($nextItem); + } } event.preventDefault(); } @@ -1363,6 +1356,10 @@ $.fn.dropdown = function(parameters) { .addClass(className.selected) ; module.set.scrollPosition($nextItem); + if(settings.selectOnShortcut && module.is.single()) { + module.set.activeItem($nextItem); + module.set.selected(module.get.choiceValue($nextItem), $nextItem); + } } event.preventDefault(); } @@ -2071,6 +2068,9 @@ $.fn.dropdown = function(parameters) { $nextSelectedItem .addClass(className.selected) ; + if(settings.selectOnShortcut && module.is.single()) { + module.set.selectedItem($nextSelectedItem); + } $menu .scrollTop(newScroll) ; @@ -2220,6 +2220,12 @@ $.fn.dropdown = function(parameters) { } } }, + selectedItem: function($item) { + module.debug('Setting user selection to item', $item); + module.remove.activeItem(); + module.set.activeItem($item); + module.set.selected(module.get.choiceValue($item), $item); + }, selectedLetter: function(letter) { var $selectedItem = $item.filter('.' + className.selected), @@ -2251,6 +2257,9 @@ $.fn.dropdown = function(parameters) { module.set.scrollPosition($nextValue); $selectedItem.removeClass(className.selected); $nextValue.addClass(className.selected); + if(settings.selectOnShortcut && module.is.single()) { + module.set.selectedItem($nextValue); + } } }, direction: function($menu) { @@ -3402,7 +3411,7 @@ $.fn.dropdown.settings = { apiSettings : false, - selectOnArrows : true, // Whether selection should occur automatically when arrow keys are used + selectOnShortcut : true, // Whether selection should occur automatically when keyboard shortcuts used minCharacters : 0, // Minimum characters required to trigger API call saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh throttle : 200, // How long to wait after last user input to search remotely