Merge pull request #123 from devforth/firefox-page-input-cursor-jump

fix: prevent page input cursor from jumping on input

Author: ivictbor

adminforth/spa/src/components/ResourceListTable.vue

@@ -189,7 +189,7 @@
         <!-- Buttons -->
         <button
           class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-          @click="page--" :disabled="page <= 1">
+          @click="page--; pageInput = page.toString();" :disabled="page <= 1">
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -201,28 +201,28 @@
         </button>
         <button
           class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-          @click="page = 1" :disabled="page <= 1">
+          @click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <div 
+        <div
           contenteditable="true" 
           class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
           @input="page = parseInt($event.target.innerText) || ''"
         >
-          {{ page }}
+          {{ pageInput }}
         </div>
 
         <button
           class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-          @click="page = totalPages" :disabled="page >= totalPages">
+          @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
           {{ totalPages }}
 
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
           class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-          @click="page++" :disabled="page >= totalPages">
+          @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
           <span class="hidden sm:inline">{{ $t('Next') }}</span>
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
@@ -318,6 +318,7 @@ const emits = defineEmits([
 ]);
 
 const checkboxesInternal: Ref<any[]> = ref([]);
+const pageInput = ref('1');
 const page = ref(1);
 const sort = ref([]);
 
@@ -346,6 +347,9 @@ watch(() => props.sort, (newSort) => {
 });
 
 watch(() => props.page, (newPage) => {
+  // page.value and newPage will not be equal only on page load
+  // this check prevents cursor jumping on manual input
+  if (page.value !== newPage) pageInput.value = newPage.toString();
   page.value = newPage;
 });
 

dev-demo/resources/apartment_buyers.ts

@@ -22,7 +22,7 @@ export default {
       gender ENUM('m', 'f'),
       info LONGTEXT,
       contact_info JSON,
-      language: CHAR(2),
+      language CHAR(2),
       ideal_price DECIMAL(65, 2),
       ideal_space FLOAT(24),
       ideal_subway_distance FLOAT(53),