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.
This commit is contained in:
parent
8b4602041c
commit
9c18798275
5 changed files with 38 additions and 6 deletions
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Stop autofocusing on diff comment after initial mount
|
||||
merge_request: 23849
|
||||
author:
|
||||
type: fixed
|
|
@ -294,10 +294,14 @@ describe('DiffsStoreUtils', () => {
|
|||
});
|
||||
|
||||
describe('prepareDiffData', () => {
|
||||
it('sets the renderIt and collapsed attribute on files', () => {
|
||||
const preparedDiff = { diff_files: [getDiffFileMock()] };
|
||||
utils.prepareDiffData(preparedDiff);
|
||||
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', () => {
|
||||
|
|
Loading…
Reference in a new issue