Merge pull request #1212 from priyang12/Pagination

Focus state being reset Fixes #1040
mathesar-foundation · Mar 22, 2022 · 0269ad4 · 0269ad4
2 parents 4be6ffe + cd6dcce
commit 0269ad4
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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 { tick, createEventDispatcher } from 'svelte';
   import {
     faAngleDoubleLeft,
     faAngleDoubleRight,
@@ -46,14 +46,17 @@
   $: pageCount = Math.ceil(total / pageSize);
   $: pageInfo = calculatePages(currentPage, pageCount);
 
-  function setPage(e: Event, _page: number) {
+  async function setPage(e: Event, _page: number) {
     if (_page > 0 && _page <= pageCount && currentPage !== _page) {
       currentPage = _page;
       dispatch('change', {
         currentPage,
         originalEvent: e,
       });
     }
+    await tick();
+    const pagebutton = document.querySelector(`[data-page="${currentPage}"]`);
+    (pagebutton as HTMLElement)?.focus();
   }
 </script>
 
@@ -125,6 +128,7 @@
               : `Goto Page ${_page}`}
             aria-selected={currentPage === _page}
             on:click={(e) => setPage(e, _page)}
+            data-page={_page}
             data-tinro-ignore
           >
             {_page}
@@ -138,6 +142,7 @@
               : `Goto Page ${_page}`}
             class="page"
             on:click={(e) => setPage(e, _page)}
+            data-page={_page}
             aria-selected={currentPage === _page}
           >
             {_page}