20340 Close decision dropdowns when an option is selected (#1446)

* close `ListSelect` with `multiple` prop when an option is selected/deselected

* update version

* add prop to toggle behaviour

* consistent prop placement

* trigger pipline

* trigger pipline 2

components/ListSelect.vue

@@ -9,6 +9,7 @@
     >
       <div class="relative w-full">
         <ListboxButton
+          ref="listboxButton"
           class="relative w-full rounded border border-gray-300 bg-white py-1.5 pl-3 pr-10 text-left transition sm:text-sm"
           :class="{
             'hover:bg-gray-100': !disabled,
@@ -87,11 +88,13 @@ import {
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 
 type ModelValueType = any
-defineProps<{
+const props = defineProps<{
   modelValue: ModelValueType | Array<ModelValueType>
   options: Array<any>
   /** Whether multiple options can be selected */
   multiple?: boolean
+  /** Only applies if `multiple` prop is also passed in. Close the `ListSelect` when an option is [de]selected.*/
+  closeOnSelect?: boolean
   /** Whether the component is disabled (can't be clicked, grayed out) */
   disabled?: boolean
   optionsStyle?: string
@@ -106,8 +109,14 @@ const emit = defineEmits<{
   (e: 'update:modelValue', newValue: any): void
 }>()
 
+const listboxButton = ref<InstanceType<typeof ListboxButton>>()
+
 const updateModelValue = (newValue: any) => {
   emit('update:modelValue', newValue)
   emit('change', newValue)
+  // close the listbox when an option is selected/deselected even when multiple options can be selected
+  if (props.multiple && props.closeOnSelect) {
+    listboxButton.value?.$el.click()
+  }
 }
 </script>

components/examine/decision/select/Conditions.vue

@@ -8,6 +8,7 @@
       options-style="!max-h-48"
       :disabled="examine.decisionSelectionsDisabled"
       multiple
+      close-on-select
     >
       <Chips
         v-if="examine.selectedConditions.length > 0"

components/examine/decision/select/Conflicts.vue

@@ -4,11 +4,12 @@
     <ListSelect
       v-model="conflicts.selectedConflicts"
       :options="options"
-      multiple
       options-style="!max-h-48 !max-w-md"
       :options-display="(option: ConflictListItem) => option.text"
       :disabled="examine.decisionSelectionsDisabled"
       @change="(_) => conflicts.syncSelectedAndComparedConflicts()"
+      multiple
+      close-on-select
     >
       <Chips
         v-if="conflicts.selectedConflicts.length > 0"

components/examine/decision/select/Macros.vue

@@ -2,12 +2,13 @@
   <div>
     <h3 class="font-semibold">Macros</h3>
     <ListSelect
-      multiple
       v-model="examine.selectedMacros"
       :disabled="examine.decisionSelectionsDisabled"
       :options="examine.macros"
       :options-display="(option: Macro) => option.name"
       options-style="!max-h-48"
+      multiple
+      close-on-select
     >
       <Chips
         v-if="examine.selectedMacros.length > 0"

components/examine/decision/select/Trademarks.vue

@@ -3,11 +3,12 @@
     <h3 class="font-semibold">Trademarks</h3>
     <ListSelect
       v-model="examine.selectedTrademarks"
-      multiple
       :options="examine.trademarks"
       options-style="!max-h-40"
       :options-display="displayTrademark"
       :disabled="examine.decisionSelectionsDisabled"
+      multiple
+      close-on-select
     >
       <Chips
         v-if="examine.selectedTrademarks.length > 0"