feat(VSelect/VAutocomplete/VCombobox): Add onChange event

resolves vuetifyjs#14151
prashantsinghb · Aug 15, 2023 · e639891 · e639891
1 parent f076841
commit e639891
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -109,9 +109,10 @@ export const VAutocomplete = genericComponent<new <
     'update:search': (val: any) => true,
     'update:modelValue': (val: any) => true,
     'update:menu': (val: boolean) => true,
+    'change': (selected: any, added: any, removed: any) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const { t } = useLocale()
     const vTextFieldRef = ref()
     const isFocused = shallowRef(false)
@@ -365,6 +366,17 @@ export const VAutocomplete = genericComponent<new <
       }
     })
 
+    watch(
+      model,
+      (val, oldVal) => {
+        emit('change',
+          model.value.map(v => v.props.value),
+          val.filter(v => !oldVal.includes(v)).map(v => v.props.value),
+          oldVal.filter(v => !val.includes(v)).map(v => v.props.value)
+        )
+      }
+    )
+
     watch(search, val => {
       if (!isFocused.value || isSelecting.value) return
 

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -110,6 +110,7 @@ export const VCombobox = genericComponent<new <
     'update:modelValue': (val: any) => true,
     'update:search': (val: string) => true,
     'update:menu': (val: boolean) => true,
+    'change': (selected: any, added: any, removed: any) => true,
   },
 
   setup (props, { emit, slots }) {
@@ -182,11 +183,20 @@ export const VCombobox = genericComponent<new <
 
       emit('update:search', value)
     })
-    watch(model, value => {
-      if (!props.multiple) {
-        _search.value = value[0]?.title ?? ''
+
+    watch(
+      model,
+      (val, oldVal) => {
+        if (!props.multiple) {
+          _search.value = val[0]?.title ?? ''
+        }
+        emit('change',
+          model.value.map(v => v.props.value),
+          val.filter(v => !oldVal.includes(v)).map(v => v.props.value),
+          oldVal.filter(v => !val.includes(v)).map(v => v.props.value)
+        )
       }
-    })
+    )
 
     const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value)
 

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -23,7 +23,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
-import { computed, mergeProps, ref, shallowRef } from 'vue'
+import { computed, mergeProps, ref, shallowRef, watch } from 'vue'
 import { deepEqual, genericComponent, getPropertyFromItem, matchesSelector, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
@@ -121,9 +121,10 @@ export const VSelect = genericComponent<new <
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: any) => true,
     'update:menu': (val: boolean) => true,
+    'change': (selected: any, added: any, removed: any) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const { t } = useLocale()
     const vTextFieldRef = ref()
     const vMenuRef = ref<VMenu>()
@@ -182,6 +183,7 @@ export const VSelect = genericComponent<new <
 
     const listRef = ref<VList>()
     const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
+
     function onClear (e: MouseEvent) {
       if (props.openOnClear) {
         menu.value = true
@@ -277,6 +279,17 @@ export const VSelect = genericComponent<new <
       }
     }
 
+    watch(
+      model,
+      (val, oldVal) => {
+        emit('change',
+          model.value.map(v => v.props.value),
+          val.filter(v => !oldVal.includes(v)).map(v => v.props.value),
+          oldVal.filter(v => !val.includes(v)).map(v => v.props.value)
+        )
+      }
+    )
+
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip)
       const hasList = !!(