Key support. Implements #8232

src/Components/Blazor/Build/src/ReferenceFromSource.props

@@ -11,7 +11,7 @@
 
   <PropertyGroup>
     <BlazorBuildReferenceFromSource>true</BlazorBuildReferenceFromSource>
-    <BlazorJsPath>$(RepositoryRoot)src\Components\Browser.JS\dist\$(Configuration)\blazor.*.js</BlazorJsPath>
+    <BlazorJsPath>$(RepositoryRoot)src\Components\Browser.JS\dist\$(Configuration)\blazor.*.js.*</BlazorJsPath>
   </PropertyGroup>
 
   <Import Project="$(MSBuildThisFileDirectory)targets/All.props" />

src/Components/Browser.JS/dist/Debug/blazor.server.js

@@ -13263,7 +13263,13 @@ var BrowserRenderer = /** @class */ (function () {
                 clearBetween(rootElementToClear, rootElementToClearEnd);
             }
         }
+        var ownerDocument = LogicalElements_1.getClosestDomElement(element).ownerDocument;
+        var activeElementBefore = ownerDocument && ownerDocument.activeElement;
         this.applyEdits(batch, element, 0, edits, referenceFrames);
+        // Try to restore focus in case it was lost due to an element move
+        if ((activeElementBefore instanceof HTMLElement) && ownerDocument && ownerDocument.activeElement !== activeElementBefore) {
+            activeElementBefore.focus();
+        }
     };
     BrowserRenderer.prototype.disposeComponent = function (componentId) {
         delete this.childComponentLocations[componentId];
@@ -13277,6 +13283,7 @@ var BrowserRenderer = /** @class */ (function () {
     BrowserRenderer.prototype.applyEdits = function (batch, parent, childIndex, edits, referenceFrames) {
         var currentDepth = 0;
         var childIndexAtCurrentDepth = childIndex;
+        var permutationList;
         var arraySegmentReader = batch.arraySegmentReader;
         var editReader = batch.editReader;
         var frameReader = batch.frameReader;
@@ -13365,6 +13372,19 @@ var BrowserRenderer = /** @class */ (function () {
                     childIndexAtCurrentDepth = currentDepth === 0 ? childIndex : 0; // The childIndex is only ever nonzero at zero depth
                     break;
                 }
+                case RenderBatch_1.EditType.permutationListEntry: {
+                    permutationList = permutationList || [];
+                    permutationList.push({
+                        fromSiblingIndex: childIndexAtCurrentDepth + editReader.siblingIndex(edit),
+                        toSiblingIndex: childIndexAtCurrentDepth + editReader.moveToSiblingIndex(edit),
+                    });
+                    break;
+                }
+                case RenderBatch_1.EditType.permutationListEnd: {
+                    LogicalElements_1.permuteLogicalChildren(parent, permutationList);
+                    permutationList = undefined;
+                    break;
+                }
                 default: {
                     var unknownType = editType; // Compile-time verification that the switch was exhaustive
                     throw new Error("Unknown edit type: " + unknownType);
@@ -14169,11 +14189,54 @@ function getLogicalChildrenArray(element) {
     return element[logicalChildrenPropname];
 }
 exports.getLogicalChildrenArray = getLogicalChildrenArray;
-function getLogicalNextSibling(element) {
-    var siblings = getLogicalChildrenArray(getLogicalParent(element));
-    var siblingIndex = Array.prototype.indexOf.call(siblings, element);
-    return siblings[siblingIndex + 1] || null;
+function permuteLogicalChildren(parent, permutationList) {
+    // The permutationList must represent a valid permutation, i.e., the list of 'from' indices
+    // is distinct, and the list of 'to' indices is a permutation of it. The algorithm here
+    // relies on that assumption.
+    // Each of the phases here has to happen separately, because each one is designed not to
+    // interfere with the indices or DOM entries used by subsequent phases.
+    // Phase 1: track which nodes we will move
+    var siblings = getLogicalChildrenArray(parent);
+    permutationList.forEach(function (listEntry) {
+        listEntry.moveRangeStart = siblings[listEntry.fromSiblingIndex];
+        listEntry.moveRangeEnd = findLastDomNodeInRange(listEntry.moveRangeStart);
+    });
+    // Phase 2: insert markers
+    permutationList.forEach(function (listEntry) {
+        var marker = listEntry.moveToBeforeMarker = document.createComment('marker');
+        var insertBeforeNode = siblings[listEntry.toSiblingIndex + 1];
+        if (insertBeforeNode) {
+            insertBeforeNode.parentNode.insertBefore(marker, insertBeforeNode);
+        }
+        else {
+            appendDomNode(marker, parent);
+        }
+    });
+    // Phase 3: move descendants & remove markers
+    permutationList.forEach(function (listEntry) {
+        var insertBefore = listEntry.moveToBeforeMarker;
+        var parentDomNode = insertBefore.parentNode;
+        var elementToMove = listEntry.moveRangeStart;
+        var moveEndNode = listEntry.moveRangeEnd;
+        var nextToMove = elementToMove;
+        while (nextToMove) {
+            var nextNext = nextToMove.nextSibling;
+            parentDomNode.insertBefore(nextToMove, insertBefore);
+            if (nextToMove === moveEndNode) {
+                break;
+            }
+            else {
+                nextToMove = nextNext;
+            }
+        }
+        parentDomNode.removeChild(insertBefore);
+    });
+    // Phase 4: update siblings index
+    permutationList.forEach(function (listEntry) {
+        siblings[listEntry.toSiblingIndex] = listEntry.moveRangeStart;
+    });
 }
+exports.permuteLogicalChildren = permuteLogicalChildren;
 function getClosestDomElement(logicalElement) {
     if (logicalElement instanceof Element) {
         return logicalElement;
@@ -14185,6 +14248,12 @@ function getClosestDomElement(logicalElement) {
         throw new Error('Not a valid logical element');
     }
 }
+exports.getClosestDomElement = getClosestDomElement;
+function getLogicalNextSibling(element) {
+    var siblings = getLogicalChildrenArray(getLogicalParent(element));
+    var siblingIndex = Array.prototype.indexOf.call(siblings, element);
+    return siblings[siblingIndex + 1] || null;
+}
 function appendDomNode(child, parent) {
     // This function only puts 'child' into the DOM in the right place relative to 'parent'
     // It does not update the logical children array of anything
@@ -14208,6 +14277,26 @@ function appendDomNode(child, parent) {
         throw new Error("Cannot append node because the parent is not a valid logical element. Parent: " + parent);
     }
 }
+// Returns the final node (in depth-first evaluation order) that is a descendant of the logical element.
+// As such, the entire subtree is between 'element' and 'findLastDomNodeInRange(element)' inclusive.
+function findLastDomNodeInRange(element) {
+    if (element instanceof Element) {
+        return element;
+    }
+    var nextSibling = getLogicalNextSibling(element);
+    if (nextSibling) {
+        // Simple case: not the last logical sibling, so take the node before the next sibling
+        return nextSibling.previousSibling;
+    }
+    else {
+        // Harder case: there's no logical next-sibling, so recurse upwards until we find
+        // a logical ancestor that does have one, or a physical element
+        var logicalParent = getLogicalParent(element);
+        return logicalParent instanceof Element
+            ? logicalParent.lastChild
+            : findLastDomNodeInRange(logicalParent);
+    }
+}
 function createSymbolOrFallback(fallback) {
     return typeof Symbol === 'function' ? Symbol() : fallback;
 }
@@ -14303,6 +14392,9 @@ var OutOfProcessRenderTreeEditReader = /** @class */ (function () {
     OutOfProcessRenderTreeEditReader.prototype.newTreeIndex = function (edit) {
         return readInt32LE(this.batchDataUint8, edit + 8); // 3rd int
     };
+    OutOfProcessRenderTreeEditReader.prototype.moveToSiblingIndex = function (edit) {
+        return readInt32LE(this.batchDataUint8, edit + 8); // 3rd int
+    };
     OutOfProcessRenderTreeEditReader.prototype.removedAttributeName = function (edit) {
         var stringIndex = readInt32LE(this.batchDataUint8, edit + 12); // 4th int
         return this.stringReader.readString(stringIndex);
@@ -14458,6 +14550,8 @@ var EditType;
     EditType[EditType["stepIn"] = 6] = "stepIn";
     EditType[EditType["stepOut"] = 7] = "stepOut";
     EditType[EditType["updateMarkup"] = 8] = "updateMarkup";
+    EditType[EditType["permutationListEntry"] = 9] = "permutationListEntry";
+    EditType[EditType["permutationListEnd"] = 10] = "permutationListEnd";
 })(EditType = exports.EditType || (exports.EditType = {}));
 var FrameType;
 (function (FrameType) {

src/Components/Browser.JS/src/Rendering/BrowserRenderer.ts

@@ -1,7 +1,7 @@
 import { RenderBatch, ArraySegment, RenderTreeEdit, RenderTreeFrame, EditType, FrameType, ArrayValues } from './RenderBatch/RenderBatch';
 import { EventDelegator } from './EventDelegator';
 import { EventForDotNet, UIEventArgs } from './EventForDotNet';
-import { LogicalElement, toLogicalElement, insertLogicalChild, removeLogicalChild, getLogicalParent, getLogicalChild, createAndInsertLogicalContainer, isSvgElement, getLogicalChildrenArray, getLogicalSiblingEnd } from './LogicalElements';
+import { LogicalElement, PermutationListEntry, toLogicalElement, insertLogicalChild, removeLogicalChild, getLogicalParent, getLogicalChild, createAndInsertLogicalContainer, isSvgElement, getLogicalChildrenArray, getLogicalSiblingEnd, permuteLogicalChildren, getClosestDomElement } from './LogicalElements';
 import { applyCaptureIdToElement } from './ElementReferenceCapture';
 const selectValuePropname = '_blazorSelectValue';
 const sharedTemplateElemForParsing = document.createElement('template');
@@ -47,7 +47,15 @@ export class BrowserRenderer {
       }
     }
 
+    const ownerDocument = getClosestDomElement(element).ownerDocument;
+    const activeElementBefore = ownerDocument && ownerDocument.activeElement;
+
     this.applyEdits(batch, element, 0, edits, referenceFrames);
+
+    // Try to restore focus in case it was lost due to an element move
+    if ((activeElementBefore instanceof HTMLElement) && ownerDocument && ownerDocument.activeElement !== activeElementBefore) {
+      activeElementBefore.focus();
+    }
   }
 
   public disposeComponent(componentId: number) {
@@ -65,6 +73,7 @@ export class BrowserRenderer {
   private applyEdits(batch: RenderBatch, parent: LogicalElement, childIndex: number, edits: ArraySegment<RenderTreeEdit>, referenceFrames: ArrayValues<RenderTreeFrame>) {
     let currentDepth = 0;
     let childIndexAtCurrentDepth = childIndex;
+    let permutationList: PermutationListEntry[] | undefined;
 
     const arraySegmentReader = batch.arraySegmentReader;
     const editReader = batch.editReader;
@@ -152,6 +161,19 @@ export class BrowserRenderer {
           childIndexAtCurrentDepth = currentDepth === 0 ? childIndex : 0; // The childIndex is only ever nonzero at zero depth
           break;
         }
+        case EditType.permutationListEntry: {
+          permutationList = permutationList || [];
+          permutationList.push({
+            fromSiblingIndex: childIndexAtCurrentDepth + editReader.siblingIndex(edit),
+            toSiblingIndex: childIndexAtCurrentDepth + editReader.moveToSiblingIndex(edit),
+          });
+          break;
+        }
+        case EditType.permutationListEnd: {
+          permuteLogicalChildren(parent, permutationList!);
+          permutationList = undefined;
+          break;
+        }
         default: {
           const unknownType: never = editType; // Compile-time verification that the switch was exhaustive
           throw new Error(`Unknown edit type: ${unknownType}`);