feat: clear text displayed on combo-box

bcgov · Sep 28, 2023 · 9636608 · 9636608
1 parent aec83fb
commit 9636608
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/frontend/src/components/forms/DropdownInputComponent.vue b/frontend/src/components/forms/DropdownInputComponent.vue
@@ -2,6 +2,7 @@
 import { ref, computed, watch } from 'vue'
 // Carbon
 import '@carbon/web-components/es/components/combo-box/index';
+import CDSComboBox from '@carbon/web-components/es/components/combo-box/combo-box';
 // Composables
 import { useEventBus } from '@vueuse/core'
 // Types
@@ -12,6 +13,7 @@ import { isEmpty } from '@/dto/CommonTypesDto'
 const props = defineProps<{
   id: string
   label: string
+  placeholder?: string
   tip: string
   modelValue: Array<CodeNameType>
   initialValue: string
@@ -72,6 +74,10 @@ const selectItem = (event:any) => {
 
 //Watch for changes on the input
 watch([selectedValue], () => {
+  if (selectedValue.value === '') {
+    // force clear text displayed on the combo-box
+    cdsComboBoxRef.value._filterInputValue = '';
+  }
   validateInput(selectedValue.value)
   emitValueChange(selectedValue.value)
 })
@@ -90,15 +96,18 @@ watch(
 )
 
 revalidateBus.on(() => validateInput(selectedValue.value))
-</script>
 
+const cdsComboBoxRef = ref<InstanceType<typeof CDSComboBox> | null>(null);
+</script>
 
 <template>
   <div class="grouping-03">
     <cds-combo-box
+      ref="cdsComboBoxRef"
       :id="id"
       filterable
       :helper-text="tip"
+      :label="placeholder"
       :title-text="label"
       :value="selectedValue"
       :invalid="error ? true : false"

diff --git a/frontend/src/components/grouping/AddressGroupComponent.vue b/frontend/src/components/grouping/AddressGroupComponent.vue
@@ -259,6 +259,7 @@ onMounted(() => {
     label="Country"
     :initial-value="selectedValue.country.text"
     tip=""
+    placeholder="Choose an option"
     :enabled="true"
     :model-value="countryList"
     :validations="[...getValidations('location.addresses.country.text'),submissionValidation(`location.addresses[${id}].country`)]"
@@ -327,6 +328,7 @@ onMounted(() => {
       :model-value="content"
       :enabled="true"
       tip=""
+      placeholder="Choose an option"
       :validations="[...getValidations('location.addresses.*.province.text'),submissionValidation(`location.addresses[${id}].province`)]"
       :error-message="addressError"
       @update:selected-value="updateStateProvince($event, 'province')"