From a2153ced5258443eaa79086cdabe0677f4516db2 Mon Sep 17 00:00:00 2001
From: Gykes <zeniiigmaa@gmail.com>
Date: Mon, 9 Sep 2024 21:52:12 -0700
Subject: [PATCH] Bottom Page-Count button causes scenes page to reset to top
 (#5241)

I think was was happening is the browser was trying to do too much at once (Rendering the popup and focusing the input simultaneously). I believe it was triggering a reflow and setting the site back to default aka: back to the top.

I set the timeout to 0 which  moves the execution to the next loop event. It gives the browser time to do one and then the other, not both at the same time.

I moved `onKeyPress` to `onKeyDown` due to the former being depreciated.
---
 ui/v2.5/src/components/List/Pagination.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx
index 3db7d2f82..ab1511882 100644
--- a/ui/v2.5/src/components/List/Pagination.tsx
+++ b/ui/v2.5/src/components/List/Pagination.tsx
@@ -19,16 +19,16 @@ const PageCount: React.FC<{
   onChangePage: (page: number) => void;
 }> = ({ totalPages, currentPage, onChangePage }) => {
   const intl = useIntl();
-
   const currentPageCtrl = useRef(null);
-
   const [pageInput, pageFocus] = useFocus();
-
   const [showSelectPage, setShowSelectPage] = useState(false);
 
   useEffect(() => {
     if (showSelectPage) {
-      pageFocus();
+      // delaying the focus to the next execution loop so that rendering takes place first and stops the page from resetting.
+      setTimeout(() => {
+        pageFocus();
+      }, 0);
     }
   }, [showSelectPage, pageFocus]);
 
@@ -105,7 +105,7 @@ const PageCount: React.FC<{
                 className="text-input"
                 ref={pageInput}
                 defaultValue={currentPage}
-                onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === "Enter") {
                     onCustomChangePage();
                     e.preventDefault();
@@ -152,7 +152,6 @@ export const Pagination: React.FC<IPaginationProps> = ({
   onChangePage,
 }) => {
   const intl = useIntl();
-
   const totalPages = useMemo(
     () => Math.ceil(totalItems / itemsPerPage),
     [totalItems, itemsPerPage]