From 205885525c03ad07cb1663c55119cf4c213fb8d5 Mon Sep 17 00:00:00 2001
From: Jer-Sch <schuurm@ns.codes>
Date: Tue, 23 Nov 2021 16:56:57 -0600
Subject: [PATCH 1/2] disable search input, ensure user can close by clicking
 outside menu, refactor

---
 .../templates/grants/shared/top-filters.html  | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/app/grants/templates/grants/shared/top-filters.html b/app/grants/templates/grants/shared/top-filters.html
index 00024d53edb..15b0efe6e29 100644
--- a/app/grants/templates/grants/shared/top-filters.html
+++ b/app/grants/templates/grants/shared/top-filters.html
@@ -17,9 +17,29 @@
           <div class="d-flex align-items-baseline" >
             <label class="heading mr-2">{% trans "Sort by" %}</label>
             {% if is_staff %}
-              <v-select class="vselect-clean rounded-pill" style="min-width:230px; border: 1px solid #ced4da;" id="experience_level" :clearable="false" :options="selectOptions.concat(adminOptions)" :selectable="(option) => !option.hasOwnProperty('group')" placeholder="Sort by" v-model="params.sort_option" :reduce="obj => obj.value" @input="fetchGrants(1)" >
+              <v-select class="vselect-clean rounded-pill" 
+                        style="min-width:230px; border: 1px solid #ced4da;" 
+                        id="experience_level" 
+                        :options="selectOptions.concat(adminOptions)" 
+                        :searchable="false" 
+                        :clearable="false" 
+                        :selectable="(option) => !option.hasOwnProperty('group')" 
+                        placeholder="Sort by" 
+                        v-model="params.sort_option" 
+                        :reduce="obj => obj.value" 
+                        @input="fetchGrants(1)" >
             {% else %}
-              <v-select class="vselect-clean rounded-pill" style="min-width:230px; border: 1px solid #ced4da;" id="experience_level" :clearable="false" :options="selectOptions" :selectable="(option) => !option.hasOwnProperty('group')" placeholder="Sort by" v-model="params.sort_option" :reduce="obj => obj.value" @input="fetchGrants(1)" >
+              <v-select class="vselect-clean rounded-pill" 
+                        style="min-width:230px; border: 1px solid #ced4da;" 
+                        id="experience_level" 
+                        :options="selectOptions" 
+                        :searchable="false" 
+                        :clearable="false" 
+                        :selectable="(option) => !option.hasOwnProperty('group')" 
+                        placeholder="Sort by" 
+                        v-model="params.sort_option" 
+                        :reduce="obj => obj.value" 
+                        @input="fetchGrants(1)" >
             {% endif %}
               <template #option="{ group, label }">
                 <div v-if="group">
@@ -28,14 +48,6 @@
                 </div>
                 [[label]]
               </template>
-              <template #search="{attributes, events}">
-                <input
-                  class="vs__search"
-                  v-bind="attributes"
-                  v-on="events"
-                  disabled=""
-                />
-              </template>
             </v-select>
           </div>
         </div>

From 9cd1a49c61d8c291478847cd4c7ef0dd5e6f866e Mon Sep 17 00:00:00 2001
From: Jer-Sch <schuurm@ns.codes>
Date: Tue, 23 Nov 2021 16:58:51 -0600
Subject: [PATCH 2/2] remove 'Most Relevant' option, update tests

---
 app/assets/v2/js/grants/index.js                  |  1 -
 cypress/integration/grants/test_grant_explorer.js | 14 ++++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index c391eafb1e4..4107862b392 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -139,7 +139,6 @@ if (document.getElementById('grants-showcase')) {
         {label: 'A to Z', value: 'title'},
         {label: 'Z to A', value: '-title'},
         {group: 'Current Round', label: null},
-        {label: 'Most Relevant', value: ''},
         {label: 'Highest Amount Raised', value: '-amount_received_in_round'},
         {label: 'Highest Contributor Count', value: '-positive_round_contributor_count'},
         {group: 'All-Time', label: null},
diff --git a/cypress/integration/grants/test_grant_explorer.js b/cypress/integration/grants/test_grant_explorer.js
index 38d4335b9ef..8ecfd74859c 100644
--- a/cypress/integration/grants/test_grant_explorer.js
+++ b/cypress/integration/grants/test_grant_explorer.js
@@ -30,12 +30,11 @@ describe('Grants Explorer page', () => {
         .should('contain', 'A to Z')
         .should('contain', 'Z to A')
         .should('contain', 'Current Round')
-        .should('contain', 'Most Relevant')
         .should('contain', 'Highest Amount Raised')
         .should('contain', 'Highest Contributor Count')
         .should('contain', 'All-Time');
-      cy.get('.vs__dropdown-menu').find('#vs3__option-14').should('contain', 'Highest Amount Raised'); // need to be more specific to test two elements with same name
-      cy.get('.vs__dropdown-menu').find('#vs3__option-15').should('contain', 'Highest Contributor Count');
+      cy.get('.vs__dropdown-menu').find('#vs3__option-13').should('contain', 'Highest Amount Raised'); // need to be more specific to test two elements with same name
+      cy.get('.vs__dropdown-menu').find('#vs3__option-14').should('contain', 'Highest Contributor Count');
     });
 
     it('divides the sort options into category names with disabled labels', () => {
@@ -125,11 +124,6 @@ describe('Grants Explorer page', () => {
       // Options in Current Round category
       cy.get('.vselect-clean').click();
 
-      cy.get('.vs__dropdown-menu').contains('Most Relevant').click();
-      cy.url().should('contain', 'sort_option='); // The value of this option is purposely set to empty string (see app/assets/v2/js/grants/index.js)
-
-      cy.get('.vselect-clean').click();
-
       cy.get('.vs__dropdown-menu').contains('Highest Amount Raised').click();
       cy.url().should('contain', 'sort_option=-amount_received_in_round');
 
@@ -141,12 +135,12 @@ describe('Grants Explorer page', () => {
       // Options in All-Time category
       cy.get('.vselect-clean').click();
 
-      cy.get('.vs__dropdown-menu').find('#vs3__option-14').contains('Highest Amount Raised').click(); // Need to be more specific here because the same options exist above
+      cy.get('.vs__dropdown-menu').find('#vs3__option-13').contains('Highest Amount Raised').click(); // Need to be more specific here because the same options exist above
       cy.url().should('contain', 'sort_option=-amount_received');
 
       cy.get('.vselect-clean').click();
 
-      cy.get('.vs__dropdown-menu').find('#vs3__option-15').contains('Highest Contributor Count').click();
+      cy.get('.vs__dropdown-menu').find('#vs3__option-14').contains('Highest Contributor Count').click();
       cy.url().should('contain', 'sort_option=-contributor_count');
 
       // Admin options