Fixes tab on Chip Input (#3022) (#3044)

js/src/modals/EditMeta/editMeta.js

@@ -107,7 +107,7 @@ export default class EditMeta extends Component {
         onTokensChange={ this.onTagsChange }
         label='(optional) tags'
         hint='press <Enter> to add a tag'
-        clearOnBlur
+        addOnBlur
       />
     );
   }

js/src/ui/Actionbar/Search/search.js

@@ -77,6 +77,8 @@ export default class ActionbarSearch extends Component {
             onBlur={ this.handleSearchBlur }
             onInputChange={ this.handleInputChange }
             onTokensChange={ this.handleTokensChange }
+
+            addOnBlur
           />
         </div>
 

js/src/ui/Form/InputChip/inputChip.css

@@ -17,10 +17,10 @@
 
 .chip {
   & > svg {
-    width: 1.2rem !important;
+    width: 1rem !important;
-    height: 1.2rem !important;
+    height: 1rem !important;
     margin: initial !important;
     margin-right: 4px !important;
-    padding: 4px 0 !important;
+    padding: 2px 0 !important;
   }
 }

js/src/ui/Form/InputChip/inputChip.js

@@ -31,17 +31,33 @@ export default class InputChip extends Component {
     onTokensChange: PropTypes.func,
     onInputChange: PropTypes.func,
     onBlur: PropTypes.func,
+    addOnBlur: PropTypes.bool,
     clearOnBlur: PropTypes.bool
   }
 
   static defaultProps = {
-    clearOnBlur: false
+    clearOnBlur: false,
+    addOnBlur: false
+  }
+
+  state = {
+    focused: false
   }
 
   render () {
     const { clearOnBlur, className, hint, label, tokens } = this.props;
+    const { focused } = this.state;
+
     const classes = `${className}`;
 
+    const textFieldStyle = {
+      height: 55
+    };
+
+    if (!focused) {
+      textFieldStyle.width = 0;
+    }
+
     return (
       <ChipInput
         className={ classes }
@@ -54,6 +70,7 @@ export default class InputChip extends Component {
 
         chipRenderer={ this.chipRenderer }
 
+        onFocus={ this.handleFocus }
         onBlur={ this.handleBlur }
         onRequestAdd={ this.handleTokenAdd }
         onRequestDelete={ this.handleTokenDelete }
@@ -63,16 +80,19 @@ export default class InputChip extends Component {
         fullWidth
 
         hintStyle={ {
-          bottom: 16,
+          bottom: 13,
-          left: 1,
+          left: 0,
           transition: 'none'
         } }
         inputStyle={ {
-          marginBottom: 18
+          marginBottom: 18,
+          width: 'initial'
         } }
-        textFieldStyle={ {
+        textFieldStyle={ textFieldStyle }
-          height: 42
+        underlineStyle={ {
-        } } />
+          borderWidth: 2
+        } }
+      />
     );
   }
 
@@ -84,7 +104,7 @@ export default class InputChip extends Component {
         key={ key }
         className={ styles.chip }
         style={ {
-          margin: '8px 8px 0 0',
+          margin: '15px 8px 0 0',
           float: 'left',
           pointerEvents: isDisabled ? 'none' : undefined,
           alignItems: 'center'
@@ -103,8 +123,19 @@ export default class InputChip extends Component {
     );
   }
 
+  handleFocus = () => {
+    this.setState({ focused: true });
+  }
+
   handleBlur = () => {
-    const { onBlur } = this.props;
+    const { onBlur, addOnBlur } = this.props;
+
+    this.setState({ focused: false });
+
+    if (addOnBlur) {
+      const { inputValue } = this.refs.chipInput.state;
+      this.handleTokenAdd(inputValue);
+    }
 
     if (typeof onBlur === 'function') {
       onBlur();
@@ -118,8 +149,11 @@ export default class InputChip extends Component {
 
     this.handleTokensChange(newTokens);
 
-    if (value === this.refs.chipInput.state.inputValue && typeof onInputChange === 'function') {
+    if (value === this.refs.chipInput.state.inputValue) {
-      onInputChange('');
+      if (typeof onInputChange === 'function') {
+        onInputChange('');
+      }
+      this.refs.chipInput.setState({ inputValue: '' });
     }
   }