From 05bc19d96ce83c3192aa999394c3ca36bcdb5bc3 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 14:54:56 -0500
Subject: [PATCH] chore(combobox): move helper text below input

---
 src/ComboBox/ComboBox.stories.js |  1 +
 src/ComboBox/ComboBox.svelte     | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/ComboBox/ComboBox.stories.js b/src/ComboBox/ComboBox.stories.js
index f16ef26b..ec2ae05c 100644
--- a/src/ComboBox/ComboBox.stories.js
+++ b/src/ComboBox/ComboBox.stories.js
@@ -15,6 +15,7 @@ export const Default = () => ({
     size: select("Field size (size)", sizes, ""),
     placeholder: text("Placeholder text (placeholder)", "Filter..."),
     titleText: text("Title (titleText)", "Combobox title"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     light: boolean("Light (light)", false),
     disabled: boolean("Disabled (disabled)", false),
     invalid: boolean("Invalid (invalid)", false),
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index e131a601..326bbf54 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -187,13 +187,6 @@
       {titleText}
     </label>
   {/if}
-  {#if helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <ListBox
     class="bx--combo-box"
     id="{comboId}"
@@ -304,4 +297,11 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
+  {#if !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
 </div>