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

windyGex · developit · commit 47a85cf8bd4c · 2017-06-01T07:25:30.000-04:00
diff --git a/src/vdom/diff.js b/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]) {
diff --git a/test/browser/render.js b/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);
+	});
 });

Original file line number	Diff line number	Diff line change
`@@ -222,7 +222,7 @@ function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {`
`222`	`222`	`child = idiff(child, vchild, context, mountAll);`
`223`	`223`
`224`	`224`	`if (child && child!==dom) {`
`225`		`- if (i>=len) {`
	`225`	`+ if (i>len) {`
`226`	`226`	`dom.appendChild(child);`
`227`	`227`	`}`
`228`	`228`	`else if (child!==originalChildren[i]) {`