From 145fa9201ac28656cb1d98adf51d4314f4bae616 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 30 Apr 2015 12:17:49 -0400 Subject: [PATCH] Adds #2060 Keyboard selection now works with all selection dropdowns, not just search --- RELEASE-NOTES.md | 2 + src/definitions/modules/dropdown.js | 76 +++++++++++++++++++++-------- 2 files changed, 57 insertions(+), 21 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 2c037779a..656654dc6 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -62,6 +62,7 @@ - **Menu** - Menus items are now slightly more padded - **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`. Dropdown styles can be themed specifically inside `menu`. - **Menu** - Vertical dropdown menus are no longer 100% `min-width` +- **Modal** - Modal `onApprove` and `onDeny` now receive the activating element as the first parameter. Added documentation about using `return false` to avoid hiding element on click. - **Progress** - `indicating` labels now are more legible use separate css variables from `indicating` bar color - **Reveal** - Added new `active` state that allows you to show `reveal` programatically - **Search** - Cache can now be cleared using `$('.search').search('clear cache')` @@ -86,6 +87,7 @@ - **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu` - **Dropdown** - Fixes `onChange` to fire when input value changes, not just when menu UI changes - **Dropdown** - Dropdowns with `transition: none` now work correctly. +- **Dropdown** - Fixed issue where `sortSelect` was relying on object key enumeration order which is browser dependent and unreliable. It now uses a sort function which functions the same in all browsers - **Dropdown** - Fixed issue with `search selection` not changing text when reselecting same value from list - **Dropdown** - Dropdown `menu` now use same font size as dropdown - **Dropdown** - Fixed behaviors called on `') .addClass(className.search) .insertBefore($text) @@ -288,7 +295,7 @@ $.fn.dropdown = function(parameters) { // replace module reference $module = $module.parent(selector.dropdown); module.refresh(); - // adjust all modules + // adjust all modules to compensate $firstModules = $allModules.slice(0, index); $lastModules = $allModules.slice(index + 1); $allModules = $firstModules.add($module).add($lastModules); @@ -978,7 +985,7 @@ $.fn.dropdown = function(parameters) { else if(selectedIsVisible) { module.verbose('Enter key pressed, choosing selected item'); module.event.item.click.call($selectedItem, event); - if(settings.useLabels) { + if(settings.useLabels && module.is.searchSelection()) { module.hideAndClear(); } else { @@ -1095,6 +1102,9 @@ $.fn.dropdown = function(parameters) { } } } + else if( module.is.selection() && !module.is.search() ) { + module.set.selectedLetter( String.fromCharCode(pressedKey) ); + } } }, @@ -1314,10 +1324,7 @@ $.fn.dropdown = function(parameters) { var select = {} ; - select.values = (settings.sortSelect) - ? {} // properties will be sorted in object when re-accessed - : [] // properties will keep original order in array - ; + select.values = []; $module .find('option') .each(function() { @@ -1331,18 +1338,10 @@ $.fn.dropdown = function(parameters) { select.placeholder = name; } else { - if(settings.sortSelect) { - select.values[value] = { - name : name, - value : value - }; - } - else { - select.values.push({ - name: name, - value: value - }); - } + select.values.push({ + name: name, + value: value + }); } }) ; @@ -1351,6 +1350,12 @@ $.fn.dropdown = function(parameters) { select.placeholder = settings.placeholder; } if(settings.sortSelect) { + select.values.sort(function(a, b) { + return (a.name > b.name) + ? 1 + : -1 + ; + }); module.debug('Retrieved and sorted values from select', select); } else { @@ -1641,6 +1646,35 @@ $.fn.dropdown = function(parameters) { } } }, + selectedLetter: function(letter) { + var + $selectedItem = $item.filter('.' + className.selected), + $nextValue = false + ; + $item + .each(function(){ + var + $choice = $(this), + text = module.get.choiceText($choice, false), + firstLetter = String(text).charAt(0).toLowerCase(), + matchedLetter = letter.toLowerCase() + ; + console.log(text, firstLetter, matchedLetter); + if(firstLetter == matchedLetter) { + if(!$choice.hasClass(className.selected)) { + $nextValue = $choice; + return false; + } + } + }) + ; + if($nextValue) { + module.verbose('Scrolling to next value with letter', letter); + module.set.scrollPosition($nextValue); + $selectedItem.removeClass(className.selected); + $nextValue.addClass(className.selected); + } + }, value: function(value, text, $selected) { var hasInput = ($input.length > 0), @@ -1726,12 +1760,11 @@ $.fn.dropdown = function(parameters) { selectedValue = module.get.choiceValue($selected, selectedText), isFiltered = $selected.hasClass(className.filtered), - isUserAddition = $selected.hasClass(className.addition), isActive = $selected.hasClass(className.active), shouldAnimate = (isMultiple && $selectedItem.length == 1) ; if(isMultiple) { - if(!isActive || isUserAddition) { + if(!isActive) { if(settings.useLabels) { module.add.label(selectedValue, selectedText, shouldAnimate); module.set.value(selectedValue, selectedText, $selected); @@ -2505,7 +2538,7 @@ $.fn.dropdown.settings = { placeholder : 'auto', // whether to convert blank