Merge branch 'master' into alisonjoseph-patch-1

carbon-design-system · Oct 23, 2019 · 0a109ba · 0a109ba
2 parents d05d3c9 + 0efc5da
commit 0a109ba
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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/...act/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/...act/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]}