Complete rewrite of dropdown to support searchable dropdown, optimizations, better scroll selection, easier to fix tab index

src/definitions/collections/menu.less

@@ -272,7 +272,7 @@
   background: @dropdownBackground;
   left: 0px;
   margin: @dropdownMenuOffset 0px 0px;
-  width: ~"calc(100% - 1px)";
+  min-width: ~"calc(100% - 1px)";
   box-shadow: @dropdownBoxShadow;
 }
 .ui.menu .pointing.dropdown.item .menu {
@@ -416,7 +416,7 @@
 
 
 /*--------------------
-     Loading
+       Loading
 ---------------------*/
 
 /* On Form */

src/definitions/modules/dropdown.js

@@ -47,6 +47,7 @@ $.fn.dropdown = function(parameters) {
         $module         = $(this),
         $item           = $module.find(selector.item),
         $text           = $module.find(selector.text),
+        $search         = $module.find(selector.search),
         $input          = $module.find(selector.input),
 
         $combo = ($module.prev().find(selector.text).size() > 0)
@@ -55,7 +56,8 @@ $.fn.dropdown = function(parameters) {
 
         $menu           = $module.children(selector.menu),
 
-
+        activated       = false,
+        selectionCache  = false,
         element         = this,
         instance        = $module.data(moduleNamespace),
         module
@@ -72,6 +74,8 @@ $.fn.dropdown = function(parameters) {
           if(hasTouch) {
             module.bind.touchEvents();
           }
+          module.setup.layout();
+
           module.bind.mouseEvents();
           module.bind.keyboardEvents();
           module.instantiate();
@@ -96,21 +100,77 @@ $.fn.dropdown = function(parameters) {
           ;
         },
 
+        setup: {
+
+          layout: function() {
+            var
+              html
+            ;
+            if( $module.is('select') ) {
+              module.debug('Dropdown initialized on a select, generating html');
+              $module
+                .hide()
+              ;
+              $('<div />')
+                .addClass( $module.attr('class') )
+              ;
+              $menu = $(settings.templates.select( module.get.selectValues() ));
+            }
+            if( module.is.search() && !module.is.searchable() ) {
+              $search = $('<input />')
+                .addClass(className.search)
+                .insertBefore($text)
+              ;
+            }
+            if( module.is.searchable() ) {
+              module.debug('Searchable dropdown initialized');
+              $search
+                .val('')
+                .attr('tabindex', 0)
+              ;
+            }
+            else {
+              module.debug('Simple selection dropdown initialized');
+              if(!$module.attr('tabindex') ) {
+                $module
+                  .attr('tabindex', 0)
+                ;
+              }
+            }
+          }
+        },
+
         bind: {
           keyboardEvents: function() {
             module.debug('Binding keyboard events');
             $module
-              .on('keydown' + eventNamespace, module.handleKeyboard)
-            ;
-            $module
-              .on('focus' + eventNamespace, module.show)
+              .on('keydown' + eventNamespace, module.event.keydown)
             ;
+            if( module.is.searchable() ) {
+              $search
+                .on('focus' + eventNamespace, module.event.searchFocus)
+                .on( module.get.inputEvent(), module.event.input)
+              ;
+              $module
+                .on('blur' + eventNamespace, module.event.blur)
+              ;
+            }
+            else {
+              $module
+                .on('mousedown', module.event.mousedown)
+                .on('mouseup', module.event.mouseup)
+                .on('focus' + eventNamespace, module.event.focus)
+                .on('blur' + eventNamespace, module.event.blur)
+              ;
+            }
           },
           touchEvents: function() {
             module.debug('Touch device detected binding touch events');
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
+            if( !module.is.searchable() ) {
+              $module
+                .on('touchstart' + eventNamespace, module.event.test.toggle)
+              ;
+            }
             $item
               .on('touchstart' + eventNamespace, module.event.item.mouseenter)
               .on('touchstart' + eventNamespace, module.event.item.click)
@@ -118,21 +178,23 @@ $.fn.dropdown = function(parameters) {
           },
           mouseEvents: function() {
             module.verbose('Mouse detected binding mouse events');
-            if(settings.on == 'click') {
-              $module
-                .on('click' + eventNamespace, module.event.test.toggle)
-              ;
-            }
-            else if(settings.on == 'hover') {
-              $module
-                .on('mouseenter' + eventNamespace, module.delay.show)
-                .on('mouseleave' + eventNamespace, module.delay.hide)
-              ;
-            }
-            else {
-              $module
-                .on(settings.on + eventNamespace, module.toggle)
-              ;
+            if( !module.is.searchable() ) {
+              if(settings.on == 'click') {
+                $module
+                  .on('click' + eventNamespace, module.event.test.toggle)
+                ;
+              }
+              else if(settings.on == 'hover') {
+                $module
+                  .on('mouseenter' + eventNamespace, module.delay.show)
+                  .on('mouseleave' + eventNamespace, module.delay.hide)
+                ;
+              }
+              else {
+                $module
+                  .on(settings.on + eventNamespace, module.toggle)
+                ;
+              }
             }
             $item
               .on('mouseenter' + eventNamespace, module.event.item.mouseenter)
@@ -169,78 +231,166 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
-        handleKeyboard: function(event) {
+        filter: function(searchTerm) {
           var
-            $selectedItem = $item.filter('.' + className.selected),
-            pressedKey    = event.which,
-            keys          = {
-              enter     : 13,
-              escape    : 27,
-              upArrow   : 38,
-              downArrow : 40
-            },
-            selectedClass   = className.selected,
-            currentIndex    = $item.index( $selectedItem ),
-            hasSelectedItem = ($selectedItem.size() > 0),
-            resultSize      = $item.size(),
-            newIndex
+            $results       = $(),
+            exactRegExp    = new RegExp('(?:\s|^)' + searchTerm, 'i'),
+            fullTextRegExp = new RegExp(searchTerm, 'i'),
+            $filteredItems
           ;
-          // close shortcuts
-          if(pressedKey == keys.escape) {
-            module.verbose('Escape key pressed, closing dropdown');
-            module.hide();
-          }
-          // result shortcuts
-          if(module.is.visible()) {
-            if(pressedKey == keys.enter && hasSelectedItem) {
-              module.verbose('Enter key pressed, choosing selected item');
-              $.proxy(module.event.item.click, $item.filter('.' + selectedClass) )(event);
-              event.preventDefault();
-              return false;
-            }
-            else if(pressedKey == keys.upArrow) {
-              module.verbose('Up key pressed, changing active item');
-              newIndex = (currentIndex - 1 < 0)
-                ? currentIndex
-                : currentIndex - 1
-              ;
-              $item
-                .removeClass(selectedClass)
-                .eq(newIndex)
-                  .addClass(selectedClass)
-              ;
-              event.preventDefault();
-            }
-            else if(pressedKey == keys.downArrow) {
-              module.verbose('Down key pressed, changing active item');
-              newIndex = (currentIndex + 1 >= resultSize)
-                ? currentIndex
-                : currentIndex + 1
-              ;
-              $item
-                .removeClass(selectedClass)
-                .eq(newIndex)
-                  .addClass(selectedClass)
+          $item
+            .each(function(){
+              var
+                $choice = $(this),
+                text    = ( $choice.data(metadata.text) !== undefined )
+                  ? $choice.data(metadata.text)
+                  : $choice.text(),
+                value   = ( $choice.data(metadata.value) !== undefined)
+                  ? $choice.data(metadata.value)
+                  : (typeof text === 'string')
+                      ? text.toLowerCase()
+                      : text
               ;
-              event.preventDefault();
-            }
-          }
-          else {
-            if(pressedKey == keys.enter) {
-              module.show();
-            }
-          }
+              if( exactRegExp.test( text ) || exactRegExp.test( value ) ) {
+                $results = $results.add($choice);
+              }
+              else if(settings.fullTextSearch) {
+                if( fullTextRegExp.test( text ) || fullTextRegExp.test( value ) ) {
+                  $results = $results.add($choice);
+                }
+              }
+            })
+          ;
+          $filteredItems = $item.not($results);
+          $item
+            .removeClass(className.filtered)
+            .removeClass(className.selected)
+          ;
+          $filteredItems
+            .addClass(className.filtered)
+          ;
+          $item
+            .not('.' + className.filtered)
+              .eq(0)
+              .addClass(className.selected)
+          ;
         },
 
         event: {
+          // prevents focus from occuring on mousedown
+          mousedown: function() {
+            activated = true;
+          },
+          mouseup: function() {
+            activated = false;
+          },
+          focus: function() {
+            if(!activated) {
+              module.show();
+            }
+          },
+          searchFocus: function() {
+            activated = true;
+            module.show();
+          },
+          blur: function() {
+            activated = false;
+            module.hide();
+          },
+          input: function(event) {
+            var
+              query = $search.val()
+            ;
+            $text.addClass(className.filtered);
+            module.filter(query);
+          },
+          keydown: function(event) {
+            var
+              $selectedItem = $item.not(className.filtered).filter('.' + className.selected).eq(0),
+              $visibleItems = $item.not('.' + className.filtered),
+              pressedKey    = event.which,
+              keys          = {
+                enter     : 13,
+                escape    : 27,
+                upArrow   : 38,
+                downArrow : 40
+              },
+              selectedClass   = className.selected,
+              currentIndex    = $visibleItems.index( $selectedItem ),
+              hasSelectedItem = ($selectedItem.size() > 0),
+              $nextItem,
+              newIndex
+            ;
+            // close shortcuts
+            if(pressedKey == keys.escape) {
+              module.verbose('Escape key pressed, closing dropdown');
+              module.hide();
+            }
+            // result shortcuts
+            if(module.is.visible()) {
+              if(pressedKey == keys.enter && hasSelectedItem) {
+                module.verbose('Enter key pressed, choosing selected item');
+                if(module.is.searchable()) {
+                  module.verbose('Removing focus from search input');
+                  $search.blur();
+                }
+                $.proxy(module.event.item.click, $selectedItem)(event);
+                event.preventDefault();
+                return false;
+              }
+              else if(pressedKey == keys.upArrow) {
+                if(!hasSelectedItem) {
+                  $nextItem = $visibleItems.eq(0);
+                }
+                else {
+                  $nextItem = $selectedItem.prevAll(':not(.' + className.filtered + ')').eq(0);
+                }
+                if(currentIndex !== 0) {
+                  module.verbose('Up key pressed, changing active item');
+                  $item
+                    .removeClass(selectedClass)
+                  ;
+                  $nextItem
+                    .addClass(selectedClass)
+                  ;
+                  module.set.scrollPosition($nextItem);
+                }
+                event.preventDefault();
+              }
+              else if(pressedKey == keys.downArrow) {
+                if(!hasSelectedItem) {
+                  $nextItem = $visibleItems.eq(0);
+                }
+                else {
+                  $nextItem = $selectedItem.nextAll(':not(.' + className.filtered + ')').eq(0);
+                }
+                if(currentIndex + 1 < $visibleItems.size() ) {
+                  module.verbose('Down key pressed, changing active item');
+                  $item
+                    .removeClass(selectedClass)
+                  ;
+                  $nextItem
+                    .addClass(selectedClass)
+                  ;
+                  module.set.scrollPosition($nextItem);
+                }
+                event.preventDefault();
+              }
+            }
+            else {
+              if(pressedKey == keys.enter) {
+                module.show();
+              }
+            }
+          },
           test: {
             toggle: function(event) {
-              if( module.determine.intent(event, module.toggle) ) {
+              if( module.determine.inMenu(event, module.toggle) ) {
                 event.preventDefault();
               }
             },
             touch: function(event) {
-              module.determine.intent(event, function() {
+              module.determine.inMenu(event, function() {
                 if(event.type == 'touchstart') {
                   module.timer = setTimeout(module.hide, settings.delay.touch);
                 }
@@ -251,7 +401,7 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             },
             hide: function(event) {
-              module.determine.intent(event, module.hide);
+              module.determine.inModule(event, module.hide);
             }
           },
 
@@ -298,11 +448,13 @@ $.fn.dropdown = function(parameters) {
                       ? text.toLowerCase()
                       : text,
                 callback = function() {
+                  $search.val('');
                   module.determine.selectAction(text, value);
                   $.proxy(settings.onChange, element)(value, text);
-                }
+                },
+                openingSubMenu = ($choice.find(selector.menu).size() > 0)
               ;
-              if( $choice.find(selector.menu).size() === 0 ) {
+              if( !openingSubMenu ) {
                 if(event.type == 'touchstart') {
                   $choice.one('click', callback);
                 }
@@ -335,10 +487,9 @@ $.fn.dropdown = function(parameters) {
               module.error(error.action, settings.action);
             }
           },
-          intent: function(event, callback) {
-            module.debug('Determining whether event occurred in dropdown', event.target);
+          inModule: function(event, callback) {
             callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
+            if( $(event.target).closest($module).size() === 0 ) {
               module.verbose('Triggering event', callback);
               callback();
               return true;
@@ -347,6 +498,18 @@ $.fn.dropdown = function(parameters) {
               module.verbose('Event occurred in dropdown, canceling callback');
               return false;
             }
+          },
+          inMenu: function(event, callback) {
+            callback = callback || function(){};
+            if( $(event.target).closest($menu).size() === 0 ) {
+              module.verbose('Triggering event', callback);
+              callback();
+              return true;
+            }
+            else {
+              module.verbose('Event occurred in dropdown menu, canceling callback');
+              return false;
+            }
           }
         },
 
@@ -432,6 +595,37 @@ $.fn.dropdown = function(parameters) {
               : $module.data(metadata.value)
             ;
           },
+          inputEvent: function() {
+            var
+              input = $search[0]
+            ;
+            if(input) {
+              return (input.oninput !== undefined)
+                ? 'input'
+                : (input.onpropertychange !== undefined)
+                  ? 'propertychange'
+                  : 'keyup'
+              ;
+            }
+            return false;
+          },
+          selectValues: function() {
+            var
+              options = {}
+            ;
+            $module
+              .find('option')
+                .each(function() {
+                  var
+                    name  = $(this).html(),
+                    value = $(this).attr('value') || name
+                  ;
+                  options[value] = name;
+                })
+            ;
+            module.debug('Retrieved values from select', options);
+            return options;
+          },
           item: function(value, strict) {
             var
               $selectedItem = false
@@ -525,31 +719,57 @@ $.fn.dropdown = function(parameters) {
         },
 
         set: {
-          scrollPosition: function() {
+          scrollPosition: function($item) {
             var
-              $activeItem  = module.get.item(),
-              activeOffset = ($activeItem.size() > 0)
-                ? $activeItem.position().top
-                : false
+              $item         = $item || module.get.item(),
+              hasActive     = ($item && $item.size() > 0),
+              edgeTolerance = 5,
+              offset,
+              itemOffset,
+              menuOffset,
+              menuScroll,
+              menuHeight,
+              abovePage,
+              belowPage
             ;
-            if(activeOffset) {
-              module.debug('Scrolling to active item');
-              $menu
-                .scrollTop(activeOffset)
-              ;
+            if($item && hasActive) {
+              menuHeight = $menu.height();
+              menuScroll = $menu.scrollTop();
+              menuOffset = $menu.offset().top;
+              itemOffset = $item.offset().top;
+              offset     = menuScroll - menuOffset + itemOffset;
+              belowPage  = menuScroll + menuHeight < (offset + edgeTolerance);
+              abovePage  = ((offset - edgeTolerance) < menuScroll);
+              if(abovePage || belowPage) {
+                module.debug('Scrolling to active item');
+                $menu
+                  .scrollTop(offset)
+                ;
+              }
             }
           },
           text: function(text) {
             if(settings.action == 'combo') {
               module.debug('Changing combo button text', text, $combo);
-              $combo
-                .text(text)
-              ;
+              if(settings.preserveHTML) {
+                $combo.html(text);
+              }
+              else {
+                $combo.text(text);
+              }
             }
             else if(settings.action !== 'select') {
               module.debug('Changing text', text, $text);
-              $text.removeClass(className.placeholder);
-              $text.text(text);
+              $text
+                .removeClass(className.filtered)
+                .removeClass(className.placeholder)
+              ;
+              if(settings.preserveHTML) {
+                $text.html(text);
+              }
+              else {
+                $text.text(text);
+              }
             }
           },
           value: function(value) {
@@ -602,6 +822,12 @@ $.fn.dropdown = function(parameters) {
         },
 
         is: {
+          search: function() {
+            return $module.hasClass(className.search);
+          },
+          searchable: function() {
+            return ($search.size() > 0);
+          },
           selection: function() {
             return $module.hasClass(className.selection);
           },
@@ -619,8 +845,8 @@ $.fn.dropdown = function(parameters) {
           },
           hidden: function($subMenu) {
             return ($subMenu)
-              ? $subMenu.is(':not(:visible)')
-              : $menu.is(':not(:visible)')
+              ? $subMenu.is(':hidden')
+              : $menu.is(':hidden')
             ;
           }
         },
@@ -643,15 +869,17 @@ $.fn.dropdown = function(parameters) {
             if( module.is.hidden($currentMenu) ) {
               module.verbose('Doing menu show animation', $currentMenu);
               if(settings.transition == 'none') {
-                callback();
+                $.proxy(callback, element)();
               }
               else if($.fn.transition !== undefined && $module.transition('is supported')) {
                 $currentMenu
                   .transition({
                     animation : settings.transition + ' in',
                     duration  : settings.duration,
-                    complete  : callback,
-                    queue     : false
+                    queue     : true,
+                    complete  : function() {
+                      $.proxy(callback, element)();
+                    }
                   })
                 ;
               }
@@ -669,7 +897,7 @@ $.fn.dropdown = function(parameters) {
                     .end()
                   .slideDown(100, 'easeOutQuad', function() {
                     $.proxy(module.event.resetStyle, this)();
-                    callback();
+                    $.proxy(callback, element)();
                   })
                 ;
               }
@@ -679,7 +907,7 @@ $.fn.dropdown = function(parameters) {
                   .clearQueue()
                   .fadeIn(settings.duration, function() {
                     $.proxy(module.event.resetStyle, this)();
-                    callback();
+                    $.proxy(callback, element)();
                   })
                 ;
               }
@@ -693,21 +921,25 @@ $.fn.dropdown = function(parameters) {
               $currentMenu = $subMenu || $menu
             ;
             callback = callback || function(){};
-            if(module.is.visible($currentMenu) ) {
+            if( module.is.visible($currentMenu) ) {
               module.verbose('Doing menu hide animation', $currentMenu);
-              if($.fn.transition !== undefined && $module.transition('is supported')) {
+
+              if(settings.transition == 'none') {
+                $.proxy(callback, element)();
+              }
+              else if($.fn.transition !== undefined && $module.transition('is supported')) {
                 $currentMenu
                   .transition({
                     animation : settings.transition + ' out',
                     duration  : settings.duration,
-                    complete  : callback,
-                    queue     : false
+                    queue     : true,
+                    complete  : function() {
+                      $item.removeClass(className.filtered);
+                      $.proxy(callback, element)();
+                    }
                   })
                 ;
               }
-              else if(settings.transition == 'none') {
-                callback();
-              }
               else if(settings.transition == 'slide down') {
                 $currentMenu
                   .show()
@@ -722,7 +954,7 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .slideUp(100, 'easeOutQuad', function() {
                     $.proxy(module.event.resetStyle, this)();
-                    callback();
+                    $.proxy(callback, element)();
                   })
                 ;
               }
@@ -732,7 +964,7 @@ $.fn.dropdown = function(parameters) {
                   .clearQueue()
                   .fadeOut(150, function() {
                     $.proxy(module.event.resetStyle, this)();
-                    callback();
+                    $.proxy(callback, element)();
                   })
                 ;
               }
@@ -748,7 +980,7 @@ $.fn.dropdown = function(parameters) {
           if( module.is.hidden() ) {
             module.hideOthers();
             module.set.active();
-            // module.set.width();
+            module.set.scrollPosition();
             module.animate.show(function() {
               if( module.can.click() ) {
                 module.bind.intent();
@@ -982,17 +1214,22 @@ $.fn.dropdown = function(parameters) {
 
 $.fn.dropdown.settings = {
 
-  name        : 'Dropdown',
-  namespace   : 'dropdown',
+  name           : 'Dropdown',
+  namespace      : 'dropdown',
+
+  debug          : false,
+  verbose        : true,
+  performance    : true,
+
+  type           : false,
 
-  debug       : false,
-  verbose     : true,
-  performance : true,
+  on             : 'click',
+  action         : 'activate',
 
-  on          : 'click',
-  action      : 'activate',
+  fullTextSearch : true,
+  preserveHTML   : false,
 
-  delay: {
+  delay          : {
     show  : 200,
     hide  : 300,
     touch : 50
@@ -1001,9 +1238,9 @@ $.fn.dropdown.settings = {
   transition : 'slide down',
   duration   : 250,
 
-  onChange : function(value, text){},
-  onShow   : function(){},
-  onHide   : function(){},
+  onChange   : function(value, text){},
+  onShow     : function(){},
+  onHide     : function(){},
 
   error   : {
     action    : 'You called a dropdown action that was not defined',
@@ -1019,23 +1256,40 @@ $.fn.dropdown.settings = {
   },
 
   selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+    menu   : '.menu',
+    item   : '.menu > .item',
+    text   : '> .text',
+    input  : '> input[type="hidden"], > select',
+    search : '> .search'
   },
 
   className : {
     active      : 'active',
-    placeholder : 'default',
     disabled    : 'disabled',
-    visible     : 'visible',
+    filtered    : 'filtered',
+    placeholder : 'default',
+    search      : 'search',
     selected    : 'selected',
-    selection   : 'selection'
+    selection   : 'selection',
+    visible     : 'visible'
   }
 
 };
 
+$.fn.dropdown.settings.templates = {
+  select: function(values) {
+    var
+      html = ''
+    ;
+    html += '<div class="menu">';
+    $.each(values, function(value, name) {
+      html += '<div class="item" data-value="' + value + '">' + name + '</div>';
+    });
+    html += '</div>';
+    return html;
+  }
+};
+
 // Adds easing
 $.extend( $.easing, {
   easeOutQuad: function (x, t, b, c, d) {

src/definitions/modules/dropdown.less

@@ -30,6 +30,7 @@
   line-height: @lineHeight;
   transition: @transition;
   tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
 }
 
 
@@ -94,12 +95,14 @@
 ---------------*/
 
 .ui.dropdown .menu .item {
+  position: relative;
   cursor: pointer;
   display: block;
   border: @itemBorder;
   height: @itemHeight;
 
   border-top: @itemDivider;
+  line-height: @itemLineHeight;
   font-size: @itemFontSize;
   color: @itemColor;
 
@@ -120,6 +123,8 @@
   border-top: none;
 }
 
+
+
 /*--------------
    Item Image
 ---------------*/
@@ -185,6 +190,7 @@
 /*--------------
     Selection
 ---------------*/
+
 /* Displays like a select box */
 
 .ui.selection.dropdown {
@@ -192,29 +198,65 @@
   word-wrap: break-word;
   white-space: normal;
   outline: 0;
+  transform: rotateZ(0deg);
+
+  min-width: @selectionMinWidth;
 
   background: @selectionBackground;
   display: @selectionDisplay;
-  padding: @selectionVerticalPadding @selectionHorizontalPadding;
+  padding: @selectionPadding;
   color: @selectionTextColor;
   box-shadow: @selectionBoxShadow;
   border: @selectionBorder;
   border-radius: @selectionBorderRadius;
   transition: @selectionTransition;
 }
+.ui.selection.dropdown.visible,
 .ui.selection.dropdown.active {
-  transform: rotateZ(0deg);
-  z-index: 10;
+  z-index: @selectionZIndex;
 }
-.ui.selection.dropdown select {
+
+.ui.selection.dropdown > input[type="hidden"],
+.ui.selection.dropdown > select {
   display: none;
 }
+.ui.selection.dropdown > .text {
+  margin-right: @selectionTextIconDistance;
+}
+.ui.selection.dropdown > .search.icon,
 .ui.selection.dropdown > .dropdown.icon {
+  position: absolute;
+  top: auto;
+  margin: 0em;
+  right: @selectionHorizontalPadding;
   opacity: @selectionIconOpacity;
-  margin: @selectionIconMargin;
   transition: @selectionIconTransition;
 }
 
+/* Search Selection Input */
+.ui.selection > input.search {
+  cursor: pointer;
+  background: none transparent;
+  border: none;
+  position: absolute;
+  top: 0em;
+  left: 0em;
+  width: 100%;
+  line-height: 1.2em;
+  padding: @selectionPadding;
+  outline: none;
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+}
+.ui.selection.active > input.search,
+.ui.selection.visible > input.search {
+  cursor: auto;
+}
+.ui.selection > input.search:focus + .text {
+  color: @unselectedTextColor !important;
+}
+
+
+/*  Selection Menu */
 .ui.selection.dropdown .menu {
   overflow-x: hidden;
   overflow-y: auto;
@@ -224,6 +266,7 @@
   border-top: none !important;
   width: auto;
   margin: 0px -1px;
+  min-width: ~"calc(100% + 2px)";
 }
 .ui.selection.dropdown .menu:after,
 .ui.selection.dropdown .menu:before {
@@ -231,8 +274,10 @@
 }
 .ui.selection.dropdown .menu .item {
   padding-left: @selectionHorizontalPadding !important;
-  padding-right: @selectionHorizontalPadding !important;
-  white-space: @selectionMenuWhiteSpace;
+  /* Add in spacing for scroll bar */
+  padding-right: calc(@selectionHorizontalPadding + 1em) !important;
+  white-space: normal;
+  word-wrap: normal;
 }
 
 /* Hover */
@@ -252,24 +297,33 @@
 }
 
 /* Visible */
-.ui.selection.dropdown.active {
+.ui.selection.dropdown.visible {
   border: @selectionVisibleBorder;
   box-shadow: @selectionVisibleBoxShadow;
 }
-.ui.active.selection.dropdown > .dropdown.icon {
+.ui.visible.selection.dropdown > .dropdown.icon {
   opacity: @selectionVisibleIconOpacity;
 }
 
+/* Filtered Item */
+.ui.selection.dropdown .filtered.text {
+  visibility: hidden;
+}
+.ui.selection.dropdown .filtered.item {
+  display: none;
+}
+
 /* Active Item */
 .ui.selection.active.dropdown .text:not(.default),
 .ui.selection.visible.dropdown .text:not(.default) {
   font-weight: @selectionVisibleTextFontWeight;
   color: @selectionVisibleTextColor;
 }
-/* Don't Repeat Active Item */
-.ui.selection.dropdown .menu .item.active {
+
+/*
+.ui.selection.dropdown .menu .active.item {
   display: none;
-}
+}*/
 
 
 /* Connecting Border */
@@ -347,6 +401,19 @@
   color: @defaultTextHoverColor;
 }
 
+
+/*--------------------
+    Keyboard Select
+----------------------*/
+
+/* Selected Item */
+.ui.dropdown.selected,
+.ui.dropdown .menu .selected.item {
+  background: @selectedBackground;
+  color: @selectedColor;
+}
+
+
 /*--------------------
         Error
 ----------------------*/

src/definitions/modules/transition.js

@@ -285,12 +285,12 @@ $.fn.transition = function() {
             ;
             requestAnimationFrame(function() {
               if($module.css('display') !== 'none') {
-                module.verbose('Overriding default display to hide element')
+                module.verbose('Overriding default display to hide element');
                 $module
                   .css('display', 'none')
                 ;
               }
-            })
+            });
           },
 
           visible: function() {
@@ -811,7 +811,7 @@ $.fn.transition.settings = {
     loading    : 'loading',
     looping    : 'looping',
     outward    : 'out',
-    transition : 'ui transition',
+    transition : 'transition',
     visible    : 'visible'
   },
 

src/definitions/modules/transition.less

@@ -29,7 +29,7 @@
 */
 
 
-.ui.transition {
+.transition {
   animation-iteration-count: 1;
   animation-duration: @transitionDefaultDuration;
   animation-timing-function: @transitionDefaultEasing;
@@ -41,26 +41,26 @@
             States
 *******************************/
 
-.ui.animating.transition {
+.animating.transition {
   display: block !important;
   backface-visibility: @backfaceVisibility;
   transform: @use3DAcceleration;
 }
 
 /* Loading */
-.ui.loading.transition {
+.loading.transition {
   position: absolute;
   top: -999999px;
   left: -99999px;
 }
 
 /* Hidden */
-.ui.hidden.transition {
+.hidden.transition {
   display: none;
 }
 
 /* Visible */
-.ui.visible.transition {
+.visible.transition {
   display: block !important;
   visibility: visible;
   backface-visibility: @backfaceVisibility;
@@ -68,7 +68,7 @@
 }
 
 /* Disabled */
-.ui.disabled.transition {
+.disabled.transition {
   animation-play-state: paused;
 }
 
@@ -76,7 +76,7 @@
           Variations
 *******************************/
 
-.ui.looping.transition {
+.looping.transition {
   animation-iteration-count: infinite;
 }
 

src/themes/packages/default/collections/menu.variables

@@ -125,14 +125,14 @@
 /* Dropdown */
 @dropdownBackground: #FFFFFF;
 @dropdownMenuOffset: 1px;
-@dropdownPointingDistance: 1px;
+@dropdownPointingDistance: 0px;
 
 @dropdownTextColor: @textColor;
 @dropdownTextColorHover: @darkTextColor;
 @dropdownIconMargin: 0em 0em 0em 1em;
 
-@dropdownBoxShadow: 0px 1px 0px 1px @borderColor;
-@dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
+@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
+@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
 
 /* Pointing Arrow */
 @arrowSize: 0.6em;

src/themes/packages/default/modules/dropdown.variables

@@ -49,6 +49,7 @@
 @itemVerticalPadding: 0.85em;
 @itemHorizontalPadding: 0.8em;
 @itemFontWeight: normal;
+@itemLineHeight: 1.2;
 @itemTextAlign: left;
 @itemTextTransform: none;
 @itemBoxShadow: none;
@@ -68,18 +69,23 @@
 --------------------*/
 
 /* Selection */
+@selectionMinWidth: 180px;
 @selectionBackground: @white;
 @selectionDisplay: inline-block;
 @selectionVerticalPadding: 0.8em;
 @selectionHorizontalPadding: 1.1em;
+@selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding;
+@selectionZIndex: 10;
+
+@selectionTextIconDistance: 2em;
 @selectionTextColor: @textColor;
+
 @selectionBoxShadow: none;
 @selectionBorder: 1px solid @borderColor;
 @selectionBorderRadius: @borderRadius;
 @selectionIconOpacity: 0.8;
 @selectionIconTransition: opacity 0.2s ease;
-@selectionIconMargin: 0em 0em 0em 1em;
-@selectionMenuMaxHeight: 280px;
+@selectionMenuMaxHeight: 245px;
 @selectionMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
 @selectionMenuItemBoxShadow: none;
 
@@ -100,7 +106,7 @@
 /* Visible */
 @selectionVisibleBorder: 1px solid @borderColor;
 @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
-@selectionVisibleTextFontWeight: bold;
+@selectionVisibleTextFontWeight: normal;
 @selectionVisibleTextColor: @selectedTextColor;
 
 /* Visible Hover */
@@ -128,14 +134,14 @@
 @defaultTextHoverColor: rgba(140, 140, 140, 0.7);
 
 /* Active Menu Item */
-@activeItemBackground: @transparentBlack;
+@activeItemBackground: transparent;
 @activeItemZIndex: @menuZIndex + 1;
 @activeItemBoxShadow: none;
 @activeItemFontWeight: bold;
 @activeItemColor: @selectedTextColor;
 
-/* Menu Error */
-
+@selectedBackground: @subtleTransparentBlack;
+@selectedColor: @selectedTextColor;
 
 /*-------------------
       Variations

src/themes/packages/default/modules/transition.overrides

@@ -6,20 +6,20 @@
     Emphasis
 ---------------*/
 
-.ui.flash.transition {
+.flash.transition {
   animation-name: flash;
 }
-.ui.shake.transition {
+.shake.transition {
   animation-name: shake;
 }
-.ui.bounce.transition {
+.bounce.transition {
   animation-name: bounce;
 }
-.ui.tada.transition {
+.tada.transition {
   animation-name: tada;
 }
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-.ui.pulse.transition {
+.pulse.transition {
   animation-name: pulse;
 }
 
@@ -100,22 +100,22 @@
      Slide
 ---------------*/
 
-.ui.slide.down.transition.in {
+.slide.down.transition.in {
   animation-name: slide;
   transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;
 }
-.ui.slide.down.transition.out {
+.slide.down.transition.out {
   animation-name: slideOut;
   transform-origin: 50% 0%;
 }
 
-.ui.slide.up.transition.in {
+.slide.up.transition.in {
   animation-name: slide;
   transform-origin: 50% 100%;
 }
-.ui.slide.up.transition.out {
+.slide.up.transition.out {
   animation-name: slideOut;
   transform-origin: 50% 100%;
 }
@@ -147,22 +147,22 @@
      Flips
 ---------------*/
 
-.ui.flip.transition.in,
-.ui.flip.transition.out {
+.flip.transition.in,
+.flip.transition.out {
   perspective: 2000px;
 }
-.ui.horizontal.flip.transition.in,
-.ui.horizontal.flip.transition.out {
+.horizontal.flip.transition.in,
+.horizontal.flip.transition.out {
   animation-name: horizontalFlip;
 }
-.ui.horizontal.flip.transition.out {
+.horizontal.flip.transition.out {
   animation-name: horizontalFlipOut;
 }
-.ui.vertical.flip.transition.in,
-.ui.vertical.flip.transition.out {
+.vertical.flip.transition.in,
+.vertical.flip.transition.out {
   animation-name: verticalFlip;
 }
-.ui.vertical.flip.transition.out {
+.vertical.flip.transition.out {
   animation-name: verticalFlipOut;
 }
 
@@ -215,24 +215,24 @@
       Fades
 ---------------*/
 
-.ui.fade.transition.in {
+.fade.transition.in {
   animation-name: fade;
 }
-.ui.fade.transition.out {
+.fade.transition.out {
   animation-name: fadeOut;
 }
 
-.ui.fade.up.transition.in {
+.fade.up.transition.in {
   animation-name: fadeUp;
 }
-.ui.fade.up.transition.out {
+.fade.up.transition.out {
   animation-name: fadeUpOut;
 }
 
-.ui.fade.down.transition.in {
+.fade.down.transition.in {
   animation-name: fadeDown;
 }
-.ui.fade.down.transition.out {
+.fade.down.transition.out {
   animation-name: fadeDownOut;
 }
 
@@ -305,10 +305,10 @@
       Scale
 ---------------*/
 
-.ui.scale.transition.in {
+.scale.transition.in {
   animation-name: scale;
 }
-.ui.scale.transition.out {
+.scale.transition.out {
   animation-name: scaleOut;
 }
 
@@ -338,14 +338,14 @@
      Drop
 ---------------*/
 
-.ui.drop.transition {
+.drop.transition {
   transform-origin: top center;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
-.ui.drop.transition.in {
+.drop.transition.in {
   animation-name: dropIn;
 }
-.ui.drop.transition.out {
+.drop.transition.out {
   animation-name: dropOut;
 }
 
@@ -375,16 +375,16 @@
      Browse
 ---------------*/
 
-.ui.browse.transition.in {
+.browse.transition.in {
   animation-name: browseIn;
   animation-timing-function: ease;
 }
-.ui.browse.transition.out,
-.ui.browse.transition.out.left {
+.browse.transition.out,
+.browse.transition.out.left {
   animation-name: browseOutLeft;
   animation-timing-function: ease;
 }
-.ui.browse.transition.out.right {
+.browse.transition.out.right {
   animation-name: browseOutRight;
   animation-timing-function: ease;
 }