diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 217b2c05e..53c17d12e 100644 --- a/src/definitions/modules/dropdown.js +++ b/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(); diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 806391283..b7861a7a1 100755 --- a/src/definitions/modules/dropdown.less +++ b/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, diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 1142932c1..8999e82c8 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -176,7 +176,10 @@ @searchMinWidth: ''; /* Search Selection */ -@searchSelectionLineHeight: 1.2em; +@searchSelectionLineHeight: 1.2142em; /* browser default for webkit */ +@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2); +@searchSelectionInputPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset) @selectionHorizontalPadding; + @searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight; @searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight; @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;