fix: switch to use vue-select instead of Multiselect (#2274)

* fix: switch to use vue-select instead of Multiselect * fix: remove unnecessary Multiselect workaround * fix: work in progress, styling of v-select control * fix: make sure there's a pointer cursor on the open indicator * fix: remove custom styling for now * fix: don't submit the form on enter for open dropdowns When enter is used to select options in a dropdown that will stay open, don't submit the form.
usdigitalresponse · Dec 12, 2023 · 3baacc6 · 3baacc6
1 parent 8bf99c5
commit 3baacc6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/packages/client/src/assets/adjust-vue-select.css b/packages/client/src/assets/adjust-vue-select.css
@@ -0,0 +1,11 @@
+/* Make vue-select dropdowns match the height for other form controls */
+.vs__dropdown-toggle {
+  padding-top: 4px;
+  padding-bottom: 7px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.vs__open-indicator {
+  cursor: pointer;
+}
diff --git a/packages/client/src/components/Modals/GrantDetails.vue b/packages/client/src/components/Modals/GrantDetails.vue
@@ -70,11 +70,11 @@
       <br />
       <b-row class="ml-2 mb-2 d-flex align-items-baseline">
         <h2 class="h4">Assigned {{newTerminologyEnabled ? 'Teams': 'Agencies'}}</h2>
-          <multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
+          <v-select v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
             :clear-on-select="false" :placeholder="`Select ${newTerminologyEnabled ? 'teams': 'agencies'}`" label="name" track-by="id"
             style="width: 300px; margin: 0 16px;" :show-labels="false"
           >
-          </multiselect>
+          </v-select>
           <b-button variant="outline-primary" @click="assignAgenciesToGrant">Assign</b-button>
       </b-row>
       <b-table :items="assignedAgencies" :fields="assignedAgenciesFields">
@@ -91,12 +91,10 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { debounce } from 'lodash';
-import Multiselect from 'vue-multiselect';
 import { newTerminologyEnabled } from '@/helpers/featureFlags';
 import { titleize } from '../../helpers/form-helpers';
 
 export default {
-  components: { Multiselect },
   props: {
     selectedGrant: Object,
   },

diff --git a/packages/client/src/components/Modals/SearchPanel.vue b/packages/client/src/components/Modals/SearchPanel.vue
@@ -93,8 +93,9 @@
             <b-form-group
               id="funding-type-group"
               label="Funding Type"
+              label-for="funding-type"
             >
-              <multiselect
+              <v-select
                 id="funding-type"
                 v-model="formData.criteria.fundingTypes"
                 :options="fundingTypeOptions"
@@ -104,15 +105,14 @@
                 :close-on-select="false"
                 :searchable="false"
                 selectLabel=""
-                :limit="2"
               />
             </b-form-group>
             <b-form-group
               id="eligibility-group"
               label="Eligibility"
               label-for="eligibility"
             >
-              <multiselect
+              <v-select
                 id="eligibility"
                 v-model="formData.criteria.eligibility"
                 :options="eligibilityCodes"
@@ -122,29 +122,28 @@
                 :close-on-select="false"
                 :searchable="true"
                 selectLabel=""
-                :limit="3"
               />
             </b-form-group>
             <b-form-group
               id="opportunity-category-group"
               label="Category"
+              label-for="opportunity-category"
             >
-              <multiselect
+              <v-select
                 id="opportunity-category"
                 v-model="formData.criteria.opportunityCategories"
                 :options="opportunityCategoryOptions"
                 :multiple="true"
                 :close-on-select="false"
                 :searchable="false"
-                :limit="2"
-                placeholder="Select Opportunity Category"
               />
             </b-form-group>
             <b-form-group
               id="bill-group"
               label="Appropriation Bill"
+              label-for="bill"
             >
-              <multiselect
+              <v-select
                 id="bill"
                 v-model="formData.criteria.bill"
                 :options="billOptions"
@@ -154,6 +153,7 @@
                 :searchable="false"
                 placeholder="All Bills"
                 :show-labels="false"
+                :clearable="false"
               />
             </b-form-group>
             <b-form-group
@@ -171,8 +171,9 @@
             <b-form-group
               id="posted-within-group"
               label="Posted Within"
+              label-for="posted-within"
             >
-              <multiselect
+              <v-select
                 id="posted-within"
                 v-model="formData.criteria.postedWithin"
                 :options="postedWithinOptions"
@@ -182,6 +183,7 @@
                 :searchable="false"
                 placeholder="All Time"
                 :show-labels="false"
+                :clearable="false"
               />
             </b-form-group>
             <b-form-group
@@ -219,7 +221,6 @@
 
 import { mapActions, mapGetters } from 'vuex';
 import { VBToggle } from 'bootstrap-vue';
-import Multiselect from 'vue-multiselect';
 import { billOptions } from '@/helpers/constants';
 import { DateTime } from 'luxon';
 
@@ -237,7 +238,6 @@ const defaultCriteria = {
 };
 
 export default {
-  components: { Multiselect },
   props: {
     SearchType: String,
     showModal: Boolean,
@@ -380,8 +380,9 @@ export default {
     onShown() {
       this.initFormState();
     },
-    async onEnter() {
-      if (this.saveEnabled) {
+    async onEnter(event) {
+      const enterInOpenDropdown = event.target.closest('.vs--open');
+      if (this.saveEnabled && !enterInOpenDropdown) {
         await this.onSubmit();
       }
     },
@@ -439,10 +440,6 @@ export default {
 };
 </script>
 <style>
-.search-panel .multiselect__option {
-  word-break: break-all;
-  white-space: normal;
-}
 .search-panel .sidebar-footer {
   border-top: 1.5px solid #e8e8e8;
   justify-content: space-between;
@@ -473,11 +470,4 @@ export default {
 .search-panel .b-sidebar-body {
   padding: .75rem;
 }
-.search-panel .search-fields-radio-group {
-  /*
-    Ensure radio buttons are hidden behind <multiselect> options
-  */
-  position: relative;
-  z-index: 0;
-}
 </style>
diff --git a/packages/client/src/main.js b/packages/client/src/main.js
@@ -6,6 +6,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import './assets/fix-sticky-headers.css';
+import './assets/adjust-vue-select.css';
 
 const fetchApi = require('@/helpers/fetchApi');