fix(dropdown): clearable icon was missing or misaligned

clearable icon ... was missing when used inside a search selection dropdown was misaligned when used inside an inline dropdown The basic fixes where already implemented but only if the clearable class was set manually, which this PR now automatically adds when the clearable setting is used.
fomantic · Mar 4, 2024 · 0e39857 · 0e39857
1 parent a5363fb
commit 0e39857
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
@@ -3468,7 +3468,12 @@
                         return $selectedMenu.hasClass(className.leftward);
                     },
                     clearable: function () {
-                        return $module.hasClass(className.clearable) || settings.clearable;
+                        var hasClearableClass = $module.hasClass(className.clearable);
+                        if (!hasClearableClass && settings.clearable) {
+                            $module.addClass(className.clearable);
+                        }
+
+                        return hasClearableClass || settings.clearable;
                     },
                     disabled: function () {
                         return $module.hasClass(className.disabled);

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -811,14 +811,14 @@ select.ui.dropdown {
         }
     }
 
-    .ui.clearable.dropdown .text,
-    .ui.clearable.dropdown a:last-of-type {
+    .ui.clearable.dropdown .text:not(.default),
+    .ui.clearable.dropdown:not(.search) > .ui.label:last-of-type {
         margin-right: @clearableTextMargin;
     }
 
     .ui.dropdown select.noselection ~ .remove.icon,
     .ui.dropdown input[value=""] ~ .remove.icon,
-    .ui.dropdown input:not([value]) ~ .remove.icon,
+    .ui.dropdown input:not([value]):not(.search) ~ .remove.icon,
     .ui.dropdown.loading > .remove.icon {
         display: none;
     }