feat(InputMenu): emit remove-tag event (#4511)

Author: J-Michalek

src/runtime/components/InputMenu.vue

@@ -128,15 +128,16 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
 }
 
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-  change: [payload: Event]
-  blur: [payload: FocusEvent]
-  focus: [payload: FocusEvent]
-  create: [item: string]
+  'change': [payload: Event]
+  'blur': [payload: FocusEvent]
+  'focus': [payload: FocusEvent]
+  'create': [item: string]
   /** Event handler when highlighted element changes. */
-  highlight: [payload: {
+  'highlight': [payload: {
     ref: HTMLElement
     value: GetModelValue<A, VK, M>
   } | undefined]
+  'remove-tag': [item: GetModelValue<A, VK, M>]
 } & GetModelValueEmits<A, VK, M>
 
 type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
@@ -366,6 +367,7 @@ function onRemoveTag(event: any) {
     const modelValue = props.modelValue as GetModelValue<T, VK, true>
     const filteredValue = modelValue.filter(value => !isEqual(value, event))
     emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
+    emits('remove-tag', event)
     onUpdate(filteredValue)
   }
 }

test/components/InputMenu.spec.ts

@@ -108,6 +108,13 @@ describe('InputMenu', () => {
       await input.vm.$emit('update:open', false)
       expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
     })
+
+    test('remove-tag event', async () => {
+      const wrapper = mount(InputMenu, { props: { modelValue: ['Option 1'], items: ['Option 1', 'Option 2'], multiple: true } })
+      const input = wrapper.findComponent({ name: 'TagsInputRoot' })
+      await input.vm.$emit('remove-tag', 'Option 1')
+      expect(wrapper.emitted()).toMatchObject({ 'remove-tag': [['Option 1']] })
+    })
   })
 
   describe('form integration', async () => {