From 6e781533347d93266375292b4def17674a7f1236 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Mon, 16 Oct 2023 17:59:49 -0400
Subject: [PATCH] Fix text field to update from url when available

---
 .../components/FileBrowser/FileBrowserPagination.vue  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
index 321e1dcb7..6b110251e 100644
--- a/web/src/components/FileBrowser/FileBrowserPagination.vue
+++ b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -19,10 +19,9 @@
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
     <v-text-field
-      v-model="pageInput"
+      v-model.number="pageInput"
       hide-details
       single-line
-      type="number"
       dense
       style="max-width: 5%;"
       class="pa-0 mx-2 my-0"
@@ -33,6 +32,7 @@
       :rules="[pageIsValid]"
       @change="emit('changePage', pageInput)"
     />
+
     <span>of {{ pageCount }}</span>
     <v-btn
       class="mx-2"
@@ -54,7 +54,8 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue';
+import { toRef } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 const props = defineProps({
   page: {
@@ -67,12 +68,14 @@ const props = defineProps({
   },
 });
 
+const route = useRoute();
+
 function pageIsValid(page: number): boolean {
   return page > 0 && page <= props.pageCount;
 }
 
 const emit = defineEmits(['changePage']);
 
-const { page: pageInput } = toRefs(props);
+const pageInput = Number(route.query.page) || toRef(props, 'page');
 
 </script>