fix(dropdown): clearable icon was missing or misaligned

lubber-de · web-flow · commit 0e39857116a4 · 2024-03-04T21:23:56.000+01:00
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.
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;
     }

Original file line number	Diff line number	Diff line change
`@@ -811,14 +811,14 @@ select.ui.dropdown {`
`811`	`811`	`}`
`812`	`812`	`}`
`813`	`813`
`814`		`- .ui.clearable.dropdown .text,`
`815`		`- .ui.clearable.dropdown a:last-of-type {`
	`814`	`+ .ui.clearable.dropdown .text:not(.default),`
	`815`	`+ .ui.clearable.dropdown:not(.search) > .ui.label:last-of-type {`
`816`	`816`	`margin-right: @clearableTextMargin;`
`817`	`817`	`}`
`818`	`818`
`819`	`819`	`.ui.dropdown select.noselection ~ .remove.icon,`
`820`	`820`	`.ui.dropdown input[value=""] ~ .remove.icon,`
`821`		`- .ui.dropdown input:not([value]) ~ .remove.icon,`
	`821`	`+ .ui.dropdown input:not([value]):not(.search) ~ .remove.icon,`
`822`	`822`	`.ui.dropdown.loading > .remove.icon {`
`823`	`823`	`display: none;`
`824`	`824`	`}`