1 files changed, 14 insertions, 6 deletions
diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue
index 8e02048f494..c7c16e91e4c 100644
--- a/app/assets/javascripts/merge_requests/components/compare_app.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_app.vue
@@ -23,9 +23,6 @@ export default {
     currentProject: {
       default: () => ({}),
     },
-    currentBranch: {
-      default: () => ({}),
-    },
     inputs: {
       default: () => ({}),
     },
@@ -35,8 +32,12 @@ export default {
     toggleClass: {
       default: () => ({}),
     },
-    branchQaSelector: {
-      default: '',
+  },
+  props: {
+    currentBranch: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
   },
   data() {
@@ -57,6 +58,12 @@ export default {
       return this.commitHtml || this.loading || !this.selectedBranch.value;
     },
   },
+  watch: {
+    currentBranch(newVal) {
+      this.selectedBranch = newVal;
+      this.fetchCommit();
+    },
+  },
   mounted() {
     this.fetchCommit();
   },
@@ -67,6 +74,7 @@ export default {
     selectBranch(branch) {
       this.selectedBranch = branch;
       this.fetchCommit();
+      this.$emit('select-branch', branch.value);
     },
     async fetchCommit() {
       if (!this.selectedBranch.value) return;
@@ -108,7 +116,7 @@ export default {
           :input-name="inputs.branch.name"
           :default="currentBranch"
           :toggle-class="toggleClass.branch"
-          :qa-selector="branchQaSelector"
+          data-testid="compare-dropdown"
           @selected="selectBranch"
         />
       </div>