From 330b08e41bb068580e6ba47397e1a5af36ac8606 Mon Sep 17 00:00:00 2001
From: Priyang <patelpriyang95@gmail.com>
Date: Tue, 22 Mar 2022 15:47:29 +0530
Subject: [PATCH 1/4] Focus state being reset

---
 .../component-library/pagination/Pagination.svelte  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
index dab7d9868b..c953abe91a 100644
--- a/mathesar_ui/src/component-library/pagination/Pagination.svelte
+++ b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { afterUpdate, createEventDispatcher } from 'svelte';
   import {
     faAngleDoubleLeft,
     faAngleDoubleRight,
@@ -45,7 +45,14 @@
 
   $: pageCount = Math.ceil(total / pageSize);
   $: pageInfo = calculatePages(currentPage, pageCount);
+  let pagebutton: HTMLElement | null = null;
 
+  afterUpdate(() => {
+    pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
+    if (pagebutton) {
+      pagebutton.focus();
+    }
+  });
   function setPage(e: Event, _page: number) {
     if (_page > 0 && _page <= pageCount && currentPage !== _page) {
       currentPage = _page;
@@ -125,6 +132,7 @@
               : `Goto Page ${_page}`}
             aria-selected={currentPage === _page}
             on:click={(e) => setPage(e, _page)}
+            data-page={_page}
             data-tinro-ignore
           >
             {_page}
@@ -135,9 +143,10 @@
             role="link"
             aria-label={currentPage === _page
               ? `Current Page, Page ${currentPage}`
-              : `Goto Page ${_page}`}
+              : `Goto Page  ${_page}`}
             class="page"
             on:click={(e) => setPage(e, _page)}
+            data-page={_page}
             aria-selected={currentPage === _page}
           >
             {_page}

From fbe42175e8ee97a2619c9745462f00525e5462e0 Mon Sep 17 00:00:00 2001
From: Priyang <patelpriyang95@gmail.com>
Date: Tue, 22 Mar 2022 17:02:20 +0530
Subject: [PATCH 2/4] Fixed test_records test fail

---
 mathesar_ui/src/component-library/pagination/Pagination.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
index c953abe91a..160de0f593 100644
--- a/mathesar_ui/src/component-library/pagination/Pagination.svelte
+++ b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -143,7 +143,7 @@
             role="link"
             aria-label={currentPage === _page
               ? `Current Page, Page ${currentPage}`
-              : `Goto Page  ${_page}`}
+              : `Goto Page ${_page}`}
             class="page"
             on:click={(e) => setPage(e, _page)}
             data-page={_page}

From a3e777c864ca683ef9054795eeb3d684807404fc Mon Sep 17 00:00:00 2001
From: Priyang <patelpriyang95@gmail.com>
Date: Tue, 22 Mar 2022 22:18:22 +0530
Subject: [PATCH 3/4] removed afterUpdate and moved logic to setPage

---
 .../component-library/pagination/Pagination.svelte  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
index 160de0f593..3b8885ab04 100644
--- a/mathesar_ui/src/component-library/pagination/Pagination.svelte
+++ b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher } from 'svelte';
+  import { tick, createEventDispatcher } from 'svelte';
   import {
     faAngleDoubleLeft,
     faAngleDoubleRight,
@@ -47,13 +47,7 @@
   $: pageInfo = calculatePages(currentPage, pageCount);
   let pagebutton: HTMLElement | null = null;
 
-  afterUpdate(() => {
-    pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
-    if (pagebutton) {
-      pagebutton.focus();
-    }
-  });
-  function setPage(e: Event, _page: number) {
+  async function setPage(e: Event, _page: number) {
     if (_page > 0 && _page <= pageCount && currentPage !== _page) {
       currentPage = _page;
       dispatch('change', {
@@ -61,6 +55,9 @@
         originalEvent: e,
       });
     }
+    await tick();
+    pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
+    pagebutton?.focus();
   }
 </script>
 

From cd6dcce7b5c88657f6704012a419108d09a214ce Mon Sep 17 00:00:00 2001
From: Pavish Kumar <pavishkumar.r@gmail.com>
Date: Tue, 22 Mar 2022 23:36:19 +0530
Subject: [PATCH 4/4] Remove pagebutton variable from higher scope

---
 .../src/component-library/pagination/Pagination.svelte       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
index 3b8885ab04..b2fa189426 100644
--- a/mathesar_ui/src/component-library/pagination/Pagination.svelte
+++ b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -45,7 +45,6 @@
 
   $: pageCount = Math.ceil(total / pageSize);
   $: pageInfo = calculatePages(currentPage, pageCount);
-  let pagebutton: HTMLElement | null = null;
 
   async function setPage(e: Event, _page: number) {
     if (_page > 0 && _page <= pageCount && currentPage !== _page) {
@@ -56,8 +55,8 @@
       });
     }
     await tick();
-    pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
-    pagebutton?.focus();
+    const pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
+    (pagebutton as HTMLElement)?.focus();
   }
 </script>