Utilize :key to minimize extra rerenders

The diff notes automatically focus on mount, and when using the index
(as opposed to line_code) for the v-bind:key, the comment form gets
unnecessarily remounted, and therefore refocused.

app/assets/javascripts/diffs/components/inline_diff_view.vue

@@ -49,7 +49,7 @@ export default {
           :is-bottom="index + 1 === diffLinesLength"
         />
         <inline-diff-comment-row
-          :key="`icr-${index}`"
+          :key="`icr-${line.line_code || index}`"
           :diff-file-hash="diffFile.file_hash"
           :line="line"
           :help-page-path="helpPagePath"

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -43,14 +43,14 @@ export default {
       <tbody>
         <template v-for="(line, index) in diffLines">
           <parallel-diff-table-row
-            :key="index"
+            :key="line.line_code"
             :file-hash="diffFile.file_hash"
             :context-lines-path="diffFile.context_lines_path"
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
           />
           <parallel-diff-comment-row
-            :key="`dcr-${index}`"
+            :key="`dcr-${line.line_code || index}`"
             :line="line"
             :diff-file-hash="diffFile.file_hash"
             :line-index="index"

app/assets/javascripts/diffs/store/utils.js

@@ -196,6 +196,15 @@ export function trimFirstCharOfLineContent(line = {}) {
   return parsedLine;
 }
+function getLineCode({ left, right }, index) {
+  if (left && left.line_code) {
+    return left.line_code;
+  } else if (right && right.line_code) {
+    return right.line_code;
+  }
+  return index;
+}
+
 // This prepares and optimizes the incoming diff data from the server
 // by setting up incremental rendering and removing unneeded data
 export function prepareDiffData(diffData) {
@@ -208,6 +217,8 @@ export function prepareDiffData(diffData) {
       const linesLength = file.parallel_diff_lines.length;
       for (let u = 0; u < linesLength; u += 1) {
         const line = file.parallel_diff_lines[u];
+
+        line.line_code = getLineCode(line, u);
         if (line.left) {
           line.left = trimFirstCharOfLineContent(line.left);
           line.left.hasForm = false;

changelogs/unreleased/51606-expanding-a-diff-while-having-an-open-comment-form-will-always-scroll-down-to-the-comment.yml

+---
+title: Stop autofocusing on diff comment after initial mount
+merge_request: 23849
+author:
+type: fixed

spec/javascripts/diffs/store/utils_spec.js

@@ -294,10 +294,14 @@ describe('DiffsStoreUtils', () => {
   });
   describe('prepareDiffData', () => {
-    it('sets the renderIt and collapsed attribute on files', () => {
-      const preparedDiff = { diff_files: [getDiffFileMock()] };
+    let preparedDiff;
+
+    beforeEach(() => {
+      preparedDiff = { diff_files: [getDiffFileMock()] };
       utils.prepareDiffData(preparedDiff);
+    });
+    it('sets the renderIt and collapsed attribute on files', () => {
       const firstParallelDiffLine = preparedDiff.diff_files[0].parallel_diff_lines[2];
       expect(firstParallelDiffLine.left.discussions.length).toBe(0);
@@ -323,6 +327,18 @@ describe('DiffsStoreUtils', () => {
       expect(preparedDiff.diff_files[0].renderIt).toBeTruthy();
       expect(preparedDiff.diff_files[0].collapsed).toBeFalsy();
     });
+
+    it('adds line_code to all lines', () => {
+      expect(
+        preparedDiff.diff_files[0].parallel_diff_lines.filter(line => !line.line_code),
+      ).toHaveLength(0);
+    });
+
+    it('uses right line code if left has none', () => {
+      const firstLine = preparedDiff.diff_files[0].parallel_diff_lines[0];
+
+      expect(firstLine.line_code).toEqual(firstLine.right.line_code);
+    });
   });
   describe('isDiscussionApplicableToLine', () => {