componentDidUpdate: function (prevProps, prevState) {
if(this.state.isBeingEdited) {
var titleInput = React.findDOMNode(this.refs.titleInput);
var staticTitle = React.findDOMNode(this.refs.staticTitle);
var $titleInput = $(titleInput);
var $staticTitle = $(staticTitle);
//Set the height of the input (height including padding) to be the same
//as the height of the div containing the text (including margin + padding)
var staticTextElementHeight = $staticTitle.outerHeight(true);
var editableTextElementHeightWithPadding = $titleInput.outerHeight();
var editableTextElementHeightWithoutPadding = $titleInput.height();
var editableTextElementPaddingHeight =
editableTextElementHeightWithPadding - editableTextElementHeightWithoutPadding;
var heightDifference = staticTextElementHeight - editableTextElementHeightWithPadding;
$titleInput.height(
(editableTextElementHeightWithPadding + heightDifference)
- editableTextElementPaddingHeight
);
titleInput.focus();
titleInput.selectionStart = titleInput.selectionEnd = titleInput.value.length;
titleInput.scrollLeft = titleInput.scrollWidth;
}
},
_onTitleInputBlur: function () {
var titleInput = React.findDOMNode(this.refs.titleInput);
if(this.props.todo.title !== titleInput.value) {
TodoActions.update(this.props.todo.id, titleInput.value);
}
this.setState(assign(this.state, { isBeingEdited: false }));
}