chore: refocus element after a diff

src/component.js

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

src/diff/index.js

@@ -310,7 +310,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++) {
@@ -332,6 +332,13 @@ export function commitRoot(commitQueue, root, refQueue) {
 			options._catchError(e, c._vnode);
 		}
 	});
+
+	if (
+		focussedElement !== document.activeElement &&
+		focussedElement.isConnected
+	) {
+		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, 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 />