@citizenplane/pimp 9.7.12 → 9.7.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.7.12",
+  "version": "9.7.15",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -22,6 +22,7 @@
       :suggestions="options"
       :typeahead
       @click="handleClick"
+      @complete="handleSearch"
       @hide="handleOverlayHidden"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
@@ -79,13 +80,12 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
-import { debounce } from '@/helpers/functions'
 import { isEmpty } from '@/helpers/object'
 
 interface Emits {
@@ -188,6 +188,7 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
+const handleSearch = (event: { query: string }) => emit('search', event.query)
 const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')
@@ -195,12 +196,10 @@ const handleOverlayHidden = () => emit('overlayHidden')
 const handleValueChange = (newValue: string | object) => {
   if (typeof newValue !== 'string') return
   searchQuery.value = newValue
-}
 
-watch(
-  searchQuery,
-  debounce((newValue) => emit('search', newValue), 500),
-)
+  // NOTE: because @complete is not triggered when the input is cleared
+  if (newValue === '') emit('search', newValue)
+}
 
 const getInputElement = () => {
   if (!multiselect.value) return null