diff --git a/ui/src/shared/components/InputClickToEdit.js b/ui/src/shared/components/InputClickToEdit.js index 34bc72a5c..8c555099b 100644 --- a/ui/src/shared/components/InputClickToEdit.js +++ b/ui/src/shared/components/InputClickToEdit.js @@ -5,17 +5,22 @@ class InputClickToEdit extends Component { super(props) this.state = { - isEditing: null, - value: this.props.value, + isEditing: false, + currentValue: this.props.value, initialValue: this.props.value, } } handleCancel = () => { + const {onKeyUpdate} = this.props + const {initialValue} = this.state this.setState({ isEditing: false, - value: this.state.initialValue, + currentValue: initialValue, }) + if (onKeyUpdate) { + onKeyUpdate(initialValue) + } } handleInputClick = () => { @@ -30,18 +35,21 @@ class InputClickToEdit extends Component { this.setState({ isEditing: false, - value: e.target.value, + currentValue: e.target.value, initialValue: e.target.value, }) } handleKeyUp = e => { const {onKeyUpdate, value} = this.props + const {initialValue} = this.state if (e.key === 'Enter') { this.handleInputBlur(e) + return } if (e.key === 'Escape') { this.handleCancel() + return } if (onKeyUpdate && value !== e.target.value) { onKeyUpdate(e.target.value) @@ -53,7 +61,7 @@ class InputClickToEdit extends Component { } render() { - const {isEditing, value} = this.state + const {isEditing, currentValue: value} = this.state const {wrapperClass, disabled, tabIndex, placeholder} = this.props const divStyle = value ? 'input-cte' : 'input-cte__empty' @@ -74,7 +82,6 @@ class InputClickToEdit extends Component { onKeyUp={this.handleKeyUp} autoFocus={true} onFocus={this.handleFocus} - ref={r => (this.inputRef = r)} tabIndex={tabIndex} placeholder={placeholder} /> @@ -93,6 +100,10 @@ class InputClickToEdit extends Component { const {func, bool, number, string} = PropTypes +InputClickToEdit.defaultValue = { + tabIndex: 0, +} + InputClickToEdit.propTypes = { wrapperClass: string.isRequired, value: string,