Enabled remote filter in compare dropdownscompare-remote-search

Previously if the project had more than 100 branches or tags it wouldnt display them even after searching.
This now correctly sends an AJAx request to the backend to search for the branches/tags

Closes #29545

2 files changed, 11 insertions, 2 deletions

diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index d91bfb1ccbd..72c0d98d47c 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -18,7 +18,8 @@ window.CompareAutocomplete = (function() {
           return $.ajax({
             url: $dropdown.data('refs-url'),
             data: {
-              ref: $dropdown.data('ref')
+              ref: $dropdown.data('ref'),
+              search: term,
             }
           }).done(function(refs) {
             return callback(refs);
@@ -26,7 +27,7 @@ window.CompareAutocomplete = (function() {
         },
         selectable: true,
         filterable: true,
-        filterByText: true,
+        filterRemote: true,
         fieldName: $dropdown.data('field-name'),
         filterInput: 'input[type="search"]',
         renderRow: function(ref) {
diff --git a/spec/features/projects/compare_spec.rb b/spec/features/projects/compare_spec.rb
index 43eb4000e58..030043d14aa 100644
--- a/spec/features/projects/compare_spec.rb
+++ b/spec/features/projects/compare_spec.rb
@@ -26,6 +26,14 @@ describe "Compare", js: true do
       click_button "Compare"
       expect(page).to have_content "Commits"
     end
+
+    it "filters branches" do
+      select_using_dropdown("from", "wip")
+
+      find(".js-compare-from-dropdown .compare-dropdown-toggle").click
+
+      expect(find(".js-compare-from-dropdown .dropdown-content")).to have_selector("li", count: 3)
+    end
   end
 
   describe "tags" do