Make assignee combobox behave like participant select (#4018)

src/dispatch/static/dispatch/src/task/AssigneeCombobox.vue

@@ -8,28 +8,41 @@
     :label="label"
     item-title="name"
     multiple
-    close
+    closable-chips
     chips
     clearable
     return-object
     placeholder="Start typing to search"
     no-filter
+    @update:model-value="handleClear"
     :loading="loading"
   >
     <template #no-data>
-      <v-list-item>
+      <v-list-item v-if="search">
         <v-list-item-title>
           No individuals matching "
           <strong>{{ search }}</strong
           >".
         </v-list-item-title>
       </v-list-item>
     </template>
+    <template #item="{ props, item }">
+      <v-list-item v-bind="props" :subtitle="item.raw.email" />
+    </template>
+    <template #chip="data">
+      <v-chip v-bind="data.props" pill>
+        <template #prepend>
+          <v-avatar color="teal" start> {{ initials(data.item.raw.name) }} </v-avatar>
+        </template>
+        {{ data.item.raw.name }}
+      </v-chip>
+    </template>
   </v-autocomplete>
 </template>
 
 <script>
 import IndividualApi from "@/individual/api"
+import { initials } from "@/filters"
 import { map } from "lodash"
 export default {
   name: "AssigneeComboBox",
@@ -57,6 +70,10 @@ export default {
     }
   },
 
+  setup() {
+    return { initials }
+  },
+
   computed: {
     assignee: {
       get() {
@@ -100,6 +117,9 @@ export default {
         this.loading = false
       })
     },
+    handleClear() {
+      this.search = null
+    },
   },
 
   created() {