Add disabled item, remove disabled selection from dropdown

RELEASE-NOTES.md

@@ -60,6 +60,7 @@
 - **Dropdown** - Added `showOnFocus` option that lets you specify whether dropdown menu should show on focus
 - **Dropdown** - `fullTextSearch: true` now uses fuzzy search (same as `ui search`)
 - **Dropdown** - Page down and page up now works with dropdown menus
+- **Dropdown** - Added `disabled item` state, disabled items will automatically be skipped with keyboard selection
 - **Form** - Added placeholder color rules for IE, `ms-input-placeholder`
 - **Form** - Fix `errored field` dropdown keyboard selection color
 - **Form Validation** - Added `different[field]` rule which requires a field to be different than another field

src/definitions/modules/dropdown.js

@@ -211,7 +211,7 @@ $.fn.dropdown = function(parameters) {
             module.verbose('Selecting first non-filtered element');
             module.remove.selectedItem();
             $item
-              .not('.' + className.filtered)
+              .not(selector.unselectable)
                 .eq(0)
                 .addClass(className.selected)
             ;
@@ -219,8 +219,8 @@ $.fn.dropdown = function(parameters) {
           nextAvailable: function($selected) {
             $selected = $selected.eq(0);
             var
-              $nextAvailable = $selected.nextAll(selector.item).not('.' + className.filtered).eq(0),
-              $prevAvailable = $selected.prevAll(selector.item).not('.' + className.filtered).eq(0),
+              $nextAvailable = $selected.nextAll(selector.item).not(selector.unselectable).eq(0),
+              $prevAvailable = $selected.prevAll(selector.item).not(selector.unselectable).eq(0),
               hasNext        = ($nextAvailable.length > 0)
             ;
             if(hasNext) {
@@ -1051,7 +1051,7 @@ $.fn.dropdown = function(parameters) {
             ;
             if(isShortcutKey) {
               var
-                $currentlySelected = $item.not('.' + className.filtered).filter('.' + className.selected).eq(0),
+                $currentlySelected = $item.not(selector.unselectable).filter('.' + className.selected).eq(0),
                 $activeItem        = $menu.children('.' + className.active).eq(0),
                 $selectedItem      = ($currentlySelected.length > 0)
                   ? $currentlySelected
@@ -1064,7 +1064,7 @@ $.fn.dropdown = function(parameters) {
                 inVisibleMenu     = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating) || $parentMenu.parent(selector.menu).length > 0),
                 hasSubMenu        = ($subMenu.length> 0),
                 hasSelectedItem   = ($selectedItem.length > 0),
-                selectedIsVisible = ($selectedItem.not('.' + className.filtered).length > 0),
+                selectedIsVisible = ($selectedItem.not(selector.unselectable).length > 0),
                 $nextItem,
                 isSubMenuItem,
                 newIndex
@@ -1130,7 +1130,7 @@ $.fn.dropdown = function(parameters) {
                 // up arrow (traverse menu up)
                 if(pressedKey == keys.upArrow) {
                   $nextItem = (hasSelectedItem && inVisibleMenu)
-                    ? $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0)
+                    ? $selectedItem.prevAll(selector.item + ':not(' + selector.unselectable + ')').eq(0)
                     : $item.eq(0)
                   ;
                   if($visibleItems.index( $nextItem ) < 0) {
@@ -1154,7 +1154,7 @@ $.fn.dropdown = function(parameters) {
                 // down arrow (traverse menu down)
                 if(pressedKey == keys.downArrow) {
                   $nextItem = (hasSelectedItem && inVisibleMenu)
-                    ? $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0)
+                    ? $nextItem = $selectedItem.nextAll(selector.item + ':not(' + selector.unselectable + ')').eq(0)
                     : $item.eq(0)
                   ;
                   if($nextItem.length === 0) {
@@ -1517,7 +1517,7 @@ $.fn.dropdown = function(parameters) {
           },
           selectedItem: function() {
             var
-              $selectedItem = $item.not('.' + className.filtered).filter('.'  + className.selected)
+              $selectedItem = $item.not(selector.unselectable).filter('.'  + className.selected)
             ;
             return ($selectedItem.length > 0)
               ? $selectedItem
@@ -1720,7 +1720,7 @@ $.fn.dropdown = function(parameters) {
             newScroll     = (direction == 'up')
               ? currentScroll - (itemHeight * itemsPerPage)
               : currentScroll + (itemHeight * itemsPerPage),
-            $selectableItem = $item.not('.' + className.filtered),
+            $selectableItem = $item.not(selector.unselectable),
             isWithinRange,
             $nextSelectedItem,
             elementIndex
@@ -2371,7 +2371,7 @@ $.fn.dropdown = function(parameters) {
             return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections);
           },
           allResultsFiltered: function() {
-            return ($item.filter('.' + className.filtered).length === $item.length);
+            return ($item.filter(selector.unselectable).length === $item.length);
           },
           value: function(value) {
             var
@@ -2915,7 +2915,8 @@ $.fn.dropdown.settings = {
     message      : '.message',
     menuIcon     : '.dropdown.icon',
     search       : 'input.search, .menu > .search > input',
-    text         : '> .text:not(.icon)'
+    text         : '> .text:not(.icon)',
+    unselectable : '.disabled, .filtered'
   },
 
   className : {

src/definitions/modules/dropdown.less

@@ -462,16 +462,6 @@ select.ui.dropdown {
   box-shadow: @selectionHoverBoxShadow;
 }
 
-/* Disabled */
-.ui.selection.dropdown.disabled,
-.ui.selection.dropdown.disabled:hover {
-  cursor: default;
-  box-shadow: none;
-  color: @selectionTextColor;
-  border: @selectionBorder;
-  opacity: @disabledOpacity !important;
-}
-
 /* Active */
 .ui.selection.active.dropdown {
   border-color: @selectionVisibleBorderColor;
@@ -899,7 +889,8 @@ select.ui.dropdown {
 ----------------------*/
 
 /* Disabled */
-.ui.disabled.dropdown {
+.ui.disabled.dropdown,
+.ui.dropdown .menu > .disabled.item {
   cursor: default;
   pointer-events: none;
   opacity: @disabledOpacity;

src/themes/default/globals/site.variables

@@ -464,7 +464,7 @@
       Disabled
 --------------------*/
 
-@disabledOpacity: 0.5;
+@disabledOpacity: 0.45;
 @disabledTextColor: rgba(40, 40, 40, 0.3);
 @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);