Fixing project and case type select (#4010)

src/dispatch/static/dispatch/src/case/type/CaseTypeSelect.vue

@@ -1,17 +1,16 @@
 <template>
-  <v-combobox
+  <v-select
     v-model="case_type"
     :items="items"
-    v-model:search="search"
     :menu-props="{ maxHeight: '400' }"
     item-title="name"
     item-value="id"
     :label="label"
-    placeholder="Start typing to search"
     :hint="hint"
     return-object
     :loading="loading"
     no-filter
+    :error-messages="show_error"
   >
     <template #item="data">
       <v-list-item v-bind="data.props" :title="null">
@@ -26,7 +25,7 @@
         <v-list-item-subtitle> Load More </v-list-item-subtitle>
       </v-list-item>
     </template>
-  </v-combobox>
+  </v-select>
 </template>
 
 <script>
@@ -82,31 +81,40 @@ export default {
         this.$emit("update:modelValue", value)
       },
     },
+    show_error() {
+      let items_names = this.items.map((item) => item.name)
+      let selected_item = this.case_type?.name || ""
+      if (items_names.includes(selected_item)) {
+        return null
+      }
+      return "Not a valid case type"
+    },
   },
 
   methods: {
     loadMore() {
       this.numItems = this.numItems + 5
       this.fetchData()
     },
+
     fetchData() {
       this.error = null
       this.loading = "error"
 
       let filterOptions = {
-        q: this.search,
+        q: "",
         sortBy: ["name"],
         descending: [false],
         itemsPerPage: this.numItems,
       }
 
       if (this.project) {
         filterOptions = {
-          ...filterOptions,
           filters: {
             project: [this.project],
             enabled: ["true"],
           },
+          ...filterOptions,
         }
       }
 
@@ -115,13 +123,6 @@ export default {
       CaseTypeApi.getAll(filterOptions).then((response) => {
         this.items = response.data.items
 
-        if (this.case_type) {
-          // check to see if the current selection is available in the list and if not we add it
-          if (!this.items.find((match) => match.id === this.case_type.id)) {
-            this.items = [this.case_type].concat(this.items)
-          }
-        }
-
         this.total = response.data.total
         this.loading = false
 

src/dispatch/static/dispatch/src/project/ProjectSelect.vue

@@ -1,14 +1,13 @@
 <template>
-  <v-combobox
+  <v-select
     :items="items"
     :label="label"
     :loading="loading"
     :menu-props="{ maxHeight: '400' }"
-    v-model:search="search"
-    @update:search="getFilteredData({ q: $event })"
     item-title="name"
     item-value="id"
     v-model="project"
+    return-object
   >
     <template #no-data>
       <v-list-item>
@@ -31,7 +30,7 @@
         <v-list-item-subtitle> Load More </v-list-item-subtitle>
       </v-list-item>
     </template>
-  </v-combobox>
+  </v-select>
 </template>
 
 <script>
@@ -84,7 +83,7 @@ export default {
       this.error = null
       this.loading = "error"
       let filterOptions = {
-        q: this.search,
+        q: "",
         itemsPerPage: this.numItems,
         sortBy: ["name"],
         descending: [false],
@@ -93,13 +92,6 @@ export default {
       ProjectApi.getAll(filterOptions).then((response) => {
         this.items = response.data.items
 
-        if (this.project) {
-          // check to see if the current selection is available in the list and if not we add it
-          if (!this.items.find((match) => match.id === this.project.id)) {
-            this.items = [this.project].concat(this.items)
-          }
-        }
-
         this.total = response.data.total
 
         if (this.items.length < this.total) {

tests/static/e2e/pages/report-incident-page.ts

@@ -21,7 +21,7 @@ export class ReportIncidentPage {
     this.reportHeader = page.getByText("Report Incident").first()
     this.titleTextBox = page.getByLabel("Title", { exact: true })
     this.descriptionTextBox = page.getByLabel("Description", { exact: true })
-    this.projectDropdown = page.getByRole("combobox").filter({ hasText: "Project" }).locator("i")
+    this.projectDropdown = page.getByRole("button", { name: "Project" })
     this.typeDropdown = page.getByRole("button", { name: "Type" })
     this.priorityDropdown = page.getByRole("button", { name: "Priority" })
     this.tagsDropdown = page.getByRole("combobox").filter({ hasText: "Tags" }).locator("i")