Fix TypeScript type safety in Pagination event handlers

- Add proper type annotations to changePage function parameter using KeyboardEvent with HTMLInputElement currentTarget
- Add proper type annotations to changeCountPerPage function parameter using Event with HTMLSelectElement currentTarget
- Replace all e.target references with e.currentTarget to access properly typed DOM elements
- Add hover state styling to active page button for better UI feedback

This change resolves TypeScript errors where EventTarget type didn't have access to element-specific properties like 'value'. Using currentTarget instead of target provides the correct type since currentTarget refers to the element that has the event listener attached, ensuring type-safe access to input and select element properties.
This commit is contained in:
2026-03-22 21:09:13 -04:00
parent f29d8f378e
commit d841fee1e7

View File

@@ -32,21 +32,25 @@
}); });
} }
function changePage(e): void { function changePage(
e: KeyboardEvent & { currentTarget: HTMLInputElement },
): void {
if ( if (
(e.key === "Enter" || e.key === "Tab") && (e.key === "Enter" || e.key === "Tab") &&
Number(e.target.value) !== page Number(e.currentTarget.value) !== page
) )
ChangeWatchListPage(Number(e.target.value)); ChangeWatchListPage(Number(e.currentTarget.value));
} }
function changeCountPerPage(e): void { function changeCountPerPage(
e: Event & { currentTarget: HTMLSelectElement },
): void {
GetAniListUserWatchingList( GetAniListUserWatchingList(
1, 1,
Number(e.target.value), Number(e.currentTarget.value),
MediaListSort.UpdatedTimeDesc, MediaListSort.UpdatedTimeDesc,
).then((result) => { ).then((result) => {
animePerPage.set(Number(e.target.value)); animePerPage.set(Number(e.currentTarget.value));
watchListPage.set(1); watchListPage.set(1);
aniListWatchlist.set(result); aniListWatchlist.set(result);
aniListLoggedIn.set(true); aniListLoggedIn.set(true);
@@ -82,7 +86,7 @@
<li> <li>
<button <button
on:click={() => ChangeWatchListPage(i + 1)} on:click={() => ChangeWatchListPage(i + 1)}
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white" class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
>{i + 1}</button >{i + 1}</button
> >
</li> </li>