Fixed IDE file row jumping into view on hover

Closes #50751

3 files changed, 33 insertions, 5 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index dbdf0be2809..110eda83bb4 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -95,16 +95,18 @@ export default {
       return this.file.changed || this.file.tempFile || this.file.staged;
     },
   },
+  watch: {
+    'file.active': function fileActiveWatch(active) {
+      if (this.file.type === 'blob' && active) {
+        this.scrollIntoView();
+      }
+    },
+  },
   mounted() {
     if (this.hasPathAtCurrentRoute()) {
       this.scrollIntoView(true);
     }
   },
-  updated() {
-    if (this.file.type === 'blob' && this.file.active) {
-      this.scrollIntoView();
-    }
-  },
   methods: {
     ...mapActions(['toggleTreeOpen']),
     clickFile() {
diff --git a/changelogs/unreleased/ide-row-hover-scroll.yml b/changelogs/unreleased/ide-row-hover-scroll.yml
new file mode 100644
index 00000000000..24c273b4f25
--- /dev/null
+++ b/changelogs/unreleased/ide-row-hover-scroll.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed IDE file row scrolling into view when hovering
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/ide/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
index f99d1f9890a..fc639a672e2 100644
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ b/spec/javascripts/ide/components/repo_file_spec.js
@@ -121,4 +121,25 @@ describe('RepoFile', () => {
       ).toContain('Locked by testuser');
     });
   });
+
+  it('calls scrollIntoView if made active', done => {
+    createComponent({
+      file: {
+        ...file(),
+        type: 'blob',
+        active: false,
+      },
+      level: 0,
+    });
+
+    spyOn(vm, 'scrollIntoView');
+
+    vm.file.active = true;
+
+    vm.$nextTick(() => {
+      expect(vm.scrollIntoView).toHaveBeenCalled();
+
+      done();
+    });
+  });
 });