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

This commit is contained in:
J-Michalek
2025-07-16 22:28:45 +02:00
committed by GitHub
parent bb99345f5b
commit 6ca7c8b7bf
2 changed files with 14 additions and 5 deletions

View File

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

View File

@@ -108,6 +108,13 @@ describe('InputMenu', () => {
await input.vm.$emit('update:open', false) await input.vm.$emit('update:open', false)
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] }) 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 () => { describe('form integration', async () => {