fix(multi-select): invalid/warn, filterable variant should only render one icon

Author: metonym

src/MultiSelect/MultiSelect.svelte

@@ -665,14 +665,6 @@
           {id}
           {name}
         >
-        {#if invalid}
-          <WarningFilled class="bx--list-box__invalid-icon" />
-        {/if}
-        {#if !invalid && warn}
-          <WarningAltFilled
-            class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
-          />
-        {/if}
         {#if value}
           <ListBoxSelection
             on:clear={() => {

tests/MultiSelect/MultiSelect.test.ts

@@ -678,6 +678,36 @@ describe("MultiSelect", () => {
       expect(wrapper).toHaveClass("bx--multi-select--invalid");
     });
 
+    // Regression: filterable + invalid rendered two WarningFilled icons
+    it("renders only one invalid icon when filterable", () => {
+      const { container } = render(MultiSelect, {
+        props: {
+          items,
+          filterable: true,
+          invalid: true,
+          invalidText: "Invalid selection",
+        },
+      });
+
+      const icons = container.querySelectorAll(".bx--list-box__invalid-icon");
+      expect(icons).toHaveLength(1);
+    });
+
+    // Regression: filterable + warn rendered two WarningAltFilled icons
+    it("renders only one warning icon when filterable", () => {
+      const { container } = render(MultiSelect, {
+        props: {
+          items,
+          filterable: true,
+          warn: true,
+          warnText: "Warning message",
+        },
+      });
+
+      const icons = container.querySelectorAll(".bx--list-box__invalid-icon");
+      expect(icons).toHaveLength(1);
+    });
+
     it("handles warning state", () => {
       render(MultiSelect, {
         props: {