Only execute appendChild when vnode length greater than origin node. (preactjs#717)

Author: windyGex

src/vdom/diff.js

@@ -222,7 +222,7 @@ function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
 			child = idiff(child, vchild, context, mountAll);
 
 			if (child && child!==dom) {
-				if (i>=len) {
+				if (i>len) {
 					dom.appendChild(child);
 				}
 				else if (child!==originalChildren[i]) {

test/browser/render.js

@@ -582,4 +582,45 @@ describe('render()', () => {
 		let html = scratch.firstElementChild.firstElementChild.outerHTML;
 		expect(sortAttributes(html)).to.equal(sortAttributes('<input type="range" min="0" max="100" list="steplist">'));
 	});
+
+	it('should not execute append operation when child is at last', (done) => {
+		let input;
+		class TodoList extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { todos: [], text: '' };
+				this.setText = this.setText.bind(this);
+				this.addTodo = this.addTodo.bind(this);
+			}
+			setText(e) {
+				this.setState({ text: e.target.value });
+			}
+			addTodo() {
+				let { todos, text } = this.state;
+				todos = todos.concat({ text });
+				this.setState({ todos, text: '' });
+			}
+			render() {
+				const {todos, text} = this.state;
+				return (
+						<div onKeyDown={ this.addTodo }>
+								{ todos.map( todo => (<div>{todo.text}</div> )) }
+								<input value={text} onInput={this.setText} ref={(i) => input = i} />
+						</div>
+				);
+			}
+		}
+		const root = render(<TodoList />, scratch);
+		input.focus();
+		input.value = 1;
+		root._component.setText({
+			target: input
+		});
+		root._component.addTodo();
+		expect(document.activeElement).to.equal(input);
+		setTimeout(() =>{
+			expect(/1/.test(scratch.innerHTML)).to.equal(true);
+			done();
+		}, 10);
+	});
 });