fix: fix jumping cursor in pagination inputs

Author: yaroslav8765

adminforth/spa/src/afcl/Table.vue

@@ -110,15 +110,15 @@
             <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
             1
           </button>
-          <div
-            :contenteditable="!isLoading && !props.isLoading"
+          <input
+            type="text"
+            v-model="pageInput"
+            :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
             class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
             @keydown="onPageKeydown($event)"
-            @input="onPageInput($event)"
             @blur="validatePageInput()"
           >
-            {{ pageInput }}
-          </div>
+          </input>
 
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
@@ -245,10 +245,6 @@
     'sort-change',
     'clickTableRow'
   ]);
-  
-  function onPageInput(event: any) {
-    pageInput.value = event.target.innerText;
-  }
 
   function validatePageInput() {
     const newPage = parseInt(pageInput.value) || 1;

adminforth/spa/src/components/ResourceListTable.vue

@@ -241,15 +241,14 @@
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <div
-          contenteditable="true" 
-          class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+        <input
+          type="text"
+          v-model="pageInput"
+          :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
+          class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
-          @input="onPageInput($event)"
           @blur="validatePageInput()"
-        >
-          {{ pageInput }}
-        </div>
+        />
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -599,10 +598,6 @@ async function startCustomAction(actionId: string, row: any) {
   }
 }
 
-function onPageInput(event: any) {
-  pageInput.value = event.target.innerText;
-}
-
 function validatePageInput() {
   const newPage = parseInt(pageInput.value) || 1;
   const validPage = Math.max(1, Math.min(newPage, totalPages.value));

adminforth/spa/src/components/ResourceListTableVirtual.vue

@@ -262,15 +262,15 @@
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <div
-          contenteditable="true" 
+        <input
+          type="text"
+          v-model="pageInput"
+          :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
           class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
-          @input="onPageInput($event)"
           @blur="validatePageInput()"
         >
-          {{ pageInput }}
-        </div>
+        </input>
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -623,9 +623,6 @@ async function startCustomAction(actionId: string, row: any) {
   }
 }
 
-function onPageInput(event: any) {
-  pageInput.value = event.target.innerText;
-}
 
 function validatePageInput() {
   const newPage = parseInt(pageInput.value) || 1;