Fix search dropdown to allow input to support bgcolors (autocomplete), fix lineheight offset on input in search selection so bged inputs do not overlap borders #1508

src/definitions/modules/dropdown.js

@@ -299,6 +299,7 @@ $.fn.dropdown = function(parameters) {
                 .on('click'     + eventNamespace, selector.search, module.show)
                 .on('focus'     + eventNamespace, selector.search, module.event.searchFocus)
                 .on('blur'      + eventNamespace, selector.search, module.event.searchBlur)
+                .on('focus'     + eventNamespace, selector.text,   module.event.searchTextFocus)
               ;
             }
             else {
@@ -450,6 +451,9 @@ $.fn.dropdown = function(parameters) {
               module.hide();
             }
           },
+          searchTextFocus: function(event) {
+            $input.focus();
+          },
           input: function(event) {
             if(module.is.searchSelection()) {
               module.set.filtered();

src/definitions/modules/dropdown.less

@@ -498,20 +498,33 @@ select.ui.dropdown {
   border: none !important;
   box-shadow: none !important;
   border-radius: 0em !important;
-
   cursor: pointer;
-  position: absolute;
   top: 0em;
   left: 0em;
   width: 100%;
   outline: none;
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
-  padding: inherit; /*Amazing trick */
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  padding: inherit;
+}
+
+/* Text Layering */
+.ui.search.dropdown > input.search {
+  position: absolute;
+  z-index: 2;
+}
+.ui.search.dropdown > .text {
+  position: relative;
+  z-index: 3;
+}
+
+.ui.search.dropdown > input:-webkit-autofill {
+  background: none transparent !important;
 }
 
 /* Search Selection */
 .ui.search.selection.dropdown > input.search {
   line-height: @searchSelectionLineHeight;
+  padding: @searchSelectionInputPadding;
 }
 
 .ui.search.dropdown.active > input.search,

src/themes/default/modules/dropdown.variables

@@ -176,7 +176,10 @@
 @searchMinWidth: '';
 
 /* Search Selection */
-@searchSelectionLineHeight: 1.2em;
+@searchSelectionLineHeight: 1.2142em; /* browser default for webkit <input> */
+@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
+@searchSelectionInputPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset) @selectionHorizontalPadding;
+
 @searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
 @searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
 @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;