diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js index f00418194..b2ba89d61 100644 --- a/js/src/modals/EditMeta/editMeta.js +++ b/js/src/modals/EditMeta/editMeta.js @@ -107,7 +107,7 @@ export default class EditMeta extends Component { onTokensChange={ this.onTagsChange } label='(optional) tags' hint='press to add a tag' - clearOnBlur + addOnBlur /> ); } diff --git a/js/src/ui/Actionbar/Search/search.js b/js/src/ui/Actionbar/Search/search.js index 4f2b7a5c0..36e3f8fe4 100644 --- a/js/src/ui/Actionbar/Search/search.js +++ b/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 /> diff --git a/js/src/ui/Form/InputChip/inputChip.css b/js/src/ui/Form/InputChip/inputChip.css index b9427f42d..6d6d495e9 100644 --- a/js/src/ui/Form/InputChip/inputChip.css +++ b/js/src/ui/Form/InputChip/inputChip.css @@ -17,10 +17,10 @@ .chip { & > svg { - width: 1.2rem !important; - height: 1.2rem !important; + width: 1rem !important; + height: 1rem !important; margin: initial !important; margin-right: 4px !important; - padding: 4px 0 !important; + padding: 2px 0 !important; } } diff --git a/js/src/ui/Form/InputChip/inputChip.js b/js/src/ui/Form/InputChip/inputChip.js index d73596f29..1b06c01d7 100644 --- a/js/src/ui/Form/InputChip/inputChip.js +++ b/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 ( + textFieldStyle={ textFieldStyle } + 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') { - onInputChange(''); + if (value === this.refs.chipInput.state.inputValue) { + if (typeof onInputChange === 'function') { + onInputChange(''); + } + this.refs.chipInput.setState({ inputValue: '' }); } }