From 6a68fbf9d0d1ff6908e3590d3c3adf3a3b514c7b Mon Sep 17 00:00:00 2001
From: Petr Kachanovsky <pkachanovsky@devforth.io>
Date: Wed, 26 Feb 2025 10:44:37 +0200
Subject: [PATCH] fix: add page input validation

---
 adminforth/spa/src/components/ResourceListTable.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index cd3351eac..8c48f4ff4 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -208,6 +208,7 @@
         <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"
+          @keydown="onPageKeydown($event)"
           @input="page = parseInt($event.target.innerText) || ''"
         >
           {{ pageInput }}
@@ -271,7 +272,7 @@
 <script setup lang="ts">
 
 
-import { computed, onMounted, ref, watch, useTemplateRef, type Ref } from 'vue';
+import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
@@ -329,6 +330,14 @@ const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.tot
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
+async function onPageKeydown(event) {
+  // page input should accept only numbers, arrow keys and backspace
+  if (['Enter', 'Space'].includes(event.code) ||
+    (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
+    && isNaN(String.fromCharCode(event.keyCode)))) {
+    event.preventDefault();
+  }
+}
 
 watch(() => sort.value, (newSort) => {
   emits('update:sort', newSort);