From cb4a232685c17c94b99d393856377f8cb0b28c5c Mon Sep 17 00:00:00 2001 From: Wes Copeland Date: Tue, 1 Oct 2024 06:13:45 -0400 Subject: [PATCH] fix(DataTableSearchInput): don't override pagination on refresh (#2730) --- .../DataTableSearchInput.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx index 7f72ddcbd..f9c90d035 100644 --- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx +++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx @@ -1,5 +1,5 @@ import type { Table } from '@tanstack/react-table'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useDebounce } from 'react-use'; import { BaseInput } from '@/common/components/+vendor/BaseInput'; @@ -23,6 +23,8 @@ export function DataTableSearchInput({ table }: DataTableSearchInputProps const { hotkeyInputRef } = useSearchInputHotkey({ key: '/' }); + const isFirstRender = useRef(true); + /** * Listen for changes with column filter state and stay in sync. Otherwise, * when the user presses the "Reset" button to reset all filters, our search @@ -39,7 +41,20 @@ export function DataTableSearchInput({ table }: DataTableSearchInputProps */ useDebounce( () => { - table.getColumn('title')?.setFilterValue(rawInputValue); + // Skip the effect on the first render. Otherwise, column filters + // be changed simply because the component mounted. + if (isFirstRender.current) { + isFirstRender.current = false; + + return; + } + + const currentFilterValue = (table.getColumn('title')?.getFilterValue() as string) ?? ''; + + // Only update the filter if the value has changed. + if (rawInputValue !== currentFilterValue) { + table.getColumn('title')?.setFilterValue(rawInputValue); + } }, getDebounceDuration(rawInputValue), [rawInputValue],