diff --git a/src/components/KTableData/KTableData.cy.ts b/src/components/KTableData/KTableData.cy.ts index c03b53ab4d..db02c75598 100644 --- a/src/components/KTableData/KTableData.cy.ts +++ b/src/components/KTableData/KTableData.cy.ts @@ -810,14 +810,17 @@ describe('KTableData', () => { .then(() => cy.wrap(Cypress.vueWrapper.setProps({ searchInput: 'some-keyword' }))) // fetcher call should be delayed (> 350ms for search func + 500ms for revalidate func) + cy.get('@fetcher', { timeout: 200 }) + .should('have.callCount', 1) cy.get('@fetcher', { timeout: 1000 }) // fetcher's 2nd call .should('have.callCount', 2) // fetcher should be called once .should('returned', { data: [{ query: 'some-keyword' }] }) .then(() => cy.wrap(Cypress.vueWrapper.setProps({ searchInput: '' }))) // fetcher should not be called as this state is already cached - cy.get('@fetcher', { timeout: 1000 }) - .should('have.callCount', 2) // fetcher's 3rd call + cy.get('@fetcher', { timeout: 200 }) + .should('have.callCount', 3) // fetcher's 3rd call + .should('returned', { data: [{ query: '' }] }) }) }) }) diff --git a/src/components/KTableData/KTableData.vue b/src/components/KTableData/KTableData.vue index a5aa507f38..7797f13a9e 100644 --- a/src/components/KTableData/KTableData.vue +++ b/src/components/KTableData/KTableData.vue @@ -304,7 +304,7 @@ const getCellSlots = computed((): string[] => { const fetcherParams = computed(() => ({ pageSize: pageSize.value, page: page.value, - query: props.searchInput || filterQuery.value, + query: filterQuery.value, sortColumnKey: sortColumnKey.value, sortColumnOrder: sortColumnOrder.value, offset: offset.value, @@ -399,9 +399,8 @@ const tableFetcherCacheKey = computed((): string => { return `k-table_${identifierKey}` }) -const query = ref('') const { debouncedFn: debouncedSearch, generateDebouncedFn: generateDebouncedSearch } = useDebounce((q: string) => { - query.value = q + filterQuery.value = q }, 350) const search = generateDebouncedSearch(0) // generate a debounced function with zero delay (immediate) @@ -420,8 +419,7 @@ const stateData = computed((): SwrvStateData => ({ state: state.value as SwrvState, })) const tableState = computed((): TableState => isTableLoading.value ? 'loading' : fetcherError.value ? 'error' : 'success') -const { debouncedFn: debouncedRevalidate, generateDebouncedFn: generateDebouncedRevalidate } = useDebounce(_revalidate, 500) -const revalidate = generateDebouncedRevalidate(0) // generate a debounced function with zero delay (immediate) +const { debouncedFn: debouncedRevalidate } = useDebounce(_revalidate, 500) const sortHandler = ({ sortColumnKey: columnKey, prevKey, sortColumnOrder: sortOrder }: TableSortPayload): void => { const header: TableDataHeader = tableHeaders.value.find((header) => header.key === columnKey)! @@ -550,10 +548,6 @@ watch([stateData, tableState], (newState) => { // handles debounce of search query watch(() => props.searchInput, (newSearchInput: string) => { - if (page.value !== 1) { - page.value = 1 - } - if (newSearchInput === '') { search(newSearchInput) } else { @@ -561,11 +555,11 @@ watch(() => props.searchInput, (newSearchInput: string) => { } }, { immediate: true }) -watch([query, page, pageSize], async (newData, oldData) => { +watch([filterQuery, pageSize], async (newData, oldData) => { const [oldQuery] = oldData - const [newQuery, newPage] = newData + const [newQuery] = newData - if (newQuery !== oldQuery && newPage !== 1) { + if (newQuery !== oldQuery && page.value !== 1) { page.value = 1 offsets.value = [null] offset.value = null