fix(dropdown): hidden cursor on form states

Whenever an empty (placeholder shown) multiple search dropdown got a form state (error/info/warning/success) the cursor was not shown anymore when clicking into the search field of the dropdown.
fomantic · May 23, 2024 · be049d2 · be049d2
1 parent 22d29e8
commit be049d2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -653,13 +653,15 @@
         }
 
         /* Placeholder */
+        .ui.form .@{state} .ui.dropdown > .default.text,
         .ui.form .@{state} ::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
         .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
             color: @formStates[@@state][inputPlaceholderColor] !important;
         }
 
+        .ui.form .@{state} .ui.dropdown > input:focus ~ .default.text,
         .ui.form .@{state} :focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -751,7 +751,7 @@ select.ui.dropdown {
         opacity: @selectionTextUnderlayIconOpacity;
     }
     .ui.active.search.dropdown input.search:focus + .text {
-        color: @selectionTextUnderlayColor !important;
+        color: @selectionTextUnderlayColor;
     }
 
     .ui.search.dropdown.button > span.sizer {
@@ -922,6 +922,9 @@ select.ui.dropdown {
             padding: inherit;
             margin: @multipleSelectionChildMargin;
             line-height: @multipleSelectionChildLineHeight;
+            &.default {
+                z-index: -1;
+            }
         }
 
         .ui.multiple.search.dropdown > .label ~ .text {
@@ -1976,7 +1979,7 @@ select.ui.dropdown {
         opacity: @invertedSelectionTextUnderlayIconOpacity;
     }
     .ui.inverted.active.search.dropdown input.search:focus + .text {
-        color: @invertedSelectionTextUnderlayColor !important;
+        color: @invertedSelectionTextUnderlayColor;
     }
 
     .ui.dropdown .inverted.menu > .message:not(.ui),