From 0efc5da1b0d905185511108bf35b8162b8e1198c Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 22 Oct 2019 17:07:36 -0500
Subject: [PATCH] fix(FilterableMultiSelect): move invalid icon location to
 match listbox (#4419)

---
 .../MultiSelect/FilterableMultiSelect.js          | 15 +++++++++------
 .../FilterableMultiSelect-test.js.snap            |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index fa368bbfaaa8..39ad4ff56641 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -295,6 +295,9 @@ export default class FilterableMultiSelect extends React.Component {
     const helper = helperText ? (
       <div className={helperClasses}>{helperText}</div>
     ) : null;
+    const inputClasses = cx(`${prefix}--text-input`, {
+      [`${prefix}--text-input--empty`]: !this.state.inputValue,
+    });
     const input = (
       <Selection
         disabled={disabled}
@@ -343,11 +346,6 @@ export default class FilterableMultiSelect extends React.Component {
                   invalidText={invalidText}
                   isOpen={isOpen}
                   {...getRootProps({ refKey: 'innerRef' })}>
-                  {invalid && (
-                    <WarningFilled16
-                      className={`${prefix}--list-box__invalid-icon`}
-                    />
-                  )}
                   <ListBox.Field
                     id={id}
                     disabled={disabled}
@@ -362,7 +360,7 @@ export default class FilterableMultiSelect extends React.Component {
                       />
                     )}
                     <input
-                      className={`${prefix}--text-input`}
+                      className={inputClasses}
                       aria-controls={`${id}__menu`}
                       aria-autocomplete="list"
                       ref={el => (this.inputNode = el)}
@@ -373,6 +371,11 @@ export default class FilterableMultiSelect extends React.Component {
                         onKeyDown: this.handleOnInputKeyDown,
                       })}
                     />
+                    {invalid && (
+                      <WarningFilled16
+                        className={`${prefix}--list-box__invalid-icon`}
+                      />
+                    )}
                     {inputValue && isOpen && (
                       <ListBox.Selection
                         clearSelection={this.clearInputValue}
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
index 3223d8d8180d..04994f6637b4 100644
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -128,7 +128,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
                   aria-controls="test-filterable-multiselect__menu"
                   aria-expanded={false}
                   autoComplete="off"
-                  className="bx--text-input"
+                  className="bx--text-input bx--text-input--empty"
                   disabled={false}
                   id="test-filterable-multiselect"
                   onBlur={[Function]}