chore: refocus element after a diff

src/component.js

@@ -131,6 +131,7 @@ function renderComponent(component) {
 		newVNode._original = oldVNode._original + 1;
 		if (options.vnode) options.vnode(newVNode);
 
+		let focus = document.activeElement;
 		diff(
 			component._parentDom,
 			newVNode,
@@ -146,7 +147,12 @@ function renderComponent(component) {
 
 		newVNode._original = oldVNode._original;
 		newVNode._parent._children[newVNode._index] = newVNode;
-		commitRoot(commitQueue, newVNode, refQueue);
+		commitRoot(
+			commitQueue,
+			newVNode,
+			refQueue,
+			newVNode._dom && newVNode._dom.contains(focus) && focus
+		);
 
 		if (newVNode._dom != oldDom) {
 			updateParentDomPointers(newVNode);

src/diff/index.js

@@ -316,7 +316,7 @@ export function diff(
  * which have callbacks to invoke in commitRoot
  * @param {VNode} root
  */
-export function commitRoot(commitQueue, root, refQueue) {
+export function commitRoot(commitQueue, root, refQueue, focussedElement) {
 	root._nextDom = undefined;
 
 	for (let i = 0; i < refQueue.length; i++) {
@@ -338,6 +338,10 @@ export function commitRoot(commitQueue, root, refQueue) {
 			options._catchError(e, c._vnode);
 		}
 	});
+
+	if (focussedElement && focussedElement !== document.activeElement) {
+		focussedElement.focus();
+	}
 }
 
 /**

src/render.js

@@ -34,6 +34,8 @@ export function render(vnode, parentDom, replaceNode) {
 	// List of effects that need to be called after diffing.
 	let commitQueue = [],
 		refQueue = [];
+	let focus = document.activeElement;
+
 	diff(
 		parentDom,
 		// Determine the new vnode tree and store it on the DOM element on
@@ -60,7 +62,7 @@ export function render(vnode, parentDom, replaceNode) {
 	);
 
 	// Flush all queued effects
-	commitRoot(commitQueue, vnode, refQueue);
+	commitRoot(commitQueue, vnode, refQueue, parentDom.contains(focus) && focus);
 }
 
 /**

test/browser/focus.test.js

@@ -156,7 +156,7 @@ describe('focus', () => {
 		teardown(scratch);
 	});
 
-	it.skip('should maintain focus when swapping elements', () => {
+	it('should maintain focus when swapping elements', () => {
 		render(
 			<List>
 				<Input />