nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-11 16:12:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Prevent full transactions page reload on search.

Browse Source
This commit is contained in:
Elisiário Couto
2025-12-08 16:06:29 +00:00
committed by Elisiário Couto
parent 07edfeaf25
commit 18ee52bdff
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/TransactionsTable.tsx
View File

@@ -123,6 +123,7 @@ export default function TransactionsTable() {
search: debouncedSearchTerm || undefined,
summaryOnly: false,
}),
placeholderData: (previousData) => previousData,
});
const transactions = transactionsResponse?.data || [];

39
frontend/src/components/filters/FilterBar.tsx
View File

@@ -32,22 +32,19 @@ export function FilterBar({
className,
}: FilterBarProps) {
const searchInputRef = useRef<HTMLInputElement>(null);
const cursorPositionRef = useRef<number | null>(null);
// Maintain focus on search input during re-renders
// Maintain focus and cursor position on search input during re-renders
useEffect(() => {
const currentInput = searchInputRef.current;
if (!currentInput) return;
// Only restore focus if the search input had focus before
const wasFocused = document.activeElement === currentInput;
// Use requestAnimationFrame to restore focus after React finishes rendering
if (wasFocused && document.activeElement !== currentInput) {
requestAnimationFrame(() => {
currentInput.focus();
});
// Restore focus and cursor position after data fetches complete
if (cursorPositionRef.current !== null && document.activeElement !== currentInput) {
currentInput.focus();
currentInput.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
}
}, [isSearchLoading]);
});
const hasActiveFilters =
filterState.searchTerm ||
@@ -83,7 +80,16 @@ export function FilterBar({
ref={searchInputRef}
placeholder="Search transactions..."
value={filterState.searchTerm}
onChange={(e) => onFilterChange("searchTerm", e.target.value)}
onChange={(e) => {
cursorPositionRef.current = e.target.selectionStart;
onFilterChange("searchTerm", e.target.value);
}}
onFocus={() => {
cursorPositionRef.current = searchInputRef.current?.selectionStart ?? null;
}}
onBlur={() => {
cursorPositionRef.current = null;
}}
className="pl-9 pr-8 bg-background"
/>
{isSearchLoading && (
@@ -122,7 +128,16 @@ export function FilterBar({
ref={searchInputRef}
placeholder="Search..."
value={filterState.searchTerm}
onChange={(e) => onFilterChange("searchTerm", e.target.value)}
onChange={(e) => {
cursorPositionRef.current = e.target.selectionStart;
onFilterChange("searchTerm", e.target.value);
}}
onFocus={() => {
cursorPositionRef.current = searchInputRef.current?.selectionStart ?? null;
}}
onBlur={() => {
cursorPositionRef.current = null;
}}
className="pl-9 pr-8 bg-background w-full"
/>
{isSearchLoading && (