diff --git a/packages/synapse-bridge/src/mixins/filterable/index.ts b/packages/synapse-bridge/src/mixins/filterable/index.ts index 7b3dc32e0e..8b86e19484 100644 --- a/packages/synapse-bridge/src/mixins/filterable/index.ts +++ b/packages/synapse-bridge/src/mixins/filterable/index.ts @@ -2,11 +2,11 @@ import { defineComponent } from 'vue' import type { PropType } from 'vue' -import { FilterItem } from './types.ts' +import type { FilterItem } from './types.ts' import { deepCopy } from '../../helpers/deepCopy' -import { ChipItem } from '../../elements/ChipList/types' +import type { ChipItem } from '../../elements/ChipList/types' import slugify from 'slugify' @@ -148,6 +148,7 @@ export const Filterable = defineComponent({ : undefined filter.value = newValue + this.updateValue(); return } @@ -160,6 +161,7 @@ export const Filterable = defineComponent({ if (isPeriodField) { filter.value = undefined + this.updateValue(); return } @@ -167,10 +169,12 @@ export const Filterable = defineComponent({ delete typedValue[chipValue] filter.value = typedValue } + this.updateValue(); }, resetFilter(filter: FilterItem): void { filter.value = undefined + this.updateValue(); }, resetAllFilters(): void { diff --git a/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue b/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue index 91210b93f5..d511486a1d 100644 --- a/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue +++ b/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue @@ -65,12 +65,13 @@ export default defineComponent({ @remove="removeChip(filter, $event)" @reset="resetFilter(filter)" /> - diff --git a/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts b/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts index 2837c6228d..db9982a033 100644 --- a/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts +++ b/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts @@ -1,8 +1,10 @@ import { describe, it, expect } from 'vitest' -import { shallowMount } from '@vue/test-utils' +import { shallowMount, mount } from '@vue/test-utils' import { vuetify } from '@tests/unit/setup' import FiltersInline from '../' import { locales } from '../locales' +import { defineComponent } from 'vue' +import { VTextField } from 'vuetify/lib/components/index.mjs' describe('FiltersInline', () => { it('renders correctly', () => { @@ -65,6 +67,73 @@ describe('FiltersInline', () => { expect(wrapper).toMatchSnapshot() }) + + it ('immediately emit an update:modelValue event when a filter is added', async () => { + const testComponent = defineComponent({ + components: { + FiltersInline, + VTextField, + }, + template: ` +
+ + + + +
+ `, + + data() { + return { + filters: [ + { + name: 'name', + label: 'Nom' + }, + { + name: 'profession', + label: 'Profession' + } + ], + } + }, + }) + + const wrapper = mount(testComponent, { + global: { + plugins: [vuetify], + } + }) + + await wrapper.find('button').trigger('click') + const FilterInlineComponent = wrapper.findComponent(FiltersInline) + const TextInput = wrapper.findComponent(VTextField) + + await TextInput.setValue('John Doe') + + expect(FilterInlineComponent.emitted('update:modelValue')?.[0]).toEqual([ + [ + { + name: 'name', + label: 'Nom', + value: 'John Doe', + }, { + name: 'profession', + label: 'Profession', + } + ], + ]) + }); }) describe('FiltersInline locales', () => {