diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts index 24875178fa..87883b33da 100644 --- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts +++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts @@ -162,6 +162,26 @@ describe('testing QueryPreviewList', () => { expect(queryPreviews.wrappers).toHaveLength(1); expect(queryPreviews.at(0).text()).toEqual('shoes - Crazy shoes'); }); + + it('load next batch when it contains duplicates', async () => { + const { getQueryPreviewItemWrappers, reRender, wrapper } = renderQueryPreviewList({ + queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }], + results: { + shirt: [createResultStub('Cool shirt')], + jeans: [createResultStub('Sick jeans')], + dress: [createResultStub('cool dress ')] + } + }); + await reRender(); + let queryPreviews = getQueryPreviewItemWrappers(); + expect(queryPreviews.wrappers).toHaveLength(2); + wrapper.setProps({ + queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }, { query: 'dress' }] + }); + await reRender(); + queryPreviews = getQueryPreviewItemWrappers(); + expect(queryPreviews.wrappers).toHaveLength(3); + }); }); interface RenderQueryPreviewListOptions { diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue index 5dc6ef9859..af0a5c71f6 100644 --- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue +++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue @@ -157,7 +157,11 @@ queries, (newQueries: string[], oldQueries: string[] | undefined) => { if (newQueries.toString() !== oldQueries?.toString()) { - queriesStatus.value = {}; + for (const key of Object.keys(queriesStatus.value)) { + if (!newQueries.includes(key)) { + delete queriesStatus.value[key]; + } + } loadNext(); } },