From be1cd824d81c0d5974a4d2dbb351e553f89a4ea8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 22 Nov 2024 10:55:11 -0300
Subject: [PATCH] feat: refs #8163 add max length and more tests

---
 src/components/common/VnInput.vue             | 32 +++++++++++++------
 .../integration/vnComponent/vnInput.spec.js   | 21 ++++++++++++
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 1aa36bf4f..081b5fb12 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -38,6 +38,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    maxlength: {
+        type: Number,
+        default: null,
+    },
 });
 
 const vnInputRef = ref(null);
@@ -90,6 +94,8 @@ const handleKeydown = (e) => {
     if (e.key === 'Backspace') return;
     if ($props.insertable && e.key.match(/[0-9]/)) {
         handleInsertMode(e);
+    } else {
+        e.preventDefault();
     }
 };
 
@@ -100,17 +106,25 @@ const handleInsertMode = (e) => {
 
     let currentValue = value.value;
     if (!currentValue) currentValue = e.key;
-    const newValue = Number(e.key);
-    if (newValue && !isNaN(newValue)) {
-        value.value =
-            currentValue.substring(0, cursorPos) +
-            newValue +
-            currentValue.substring(cursorPos + 1);
+    const newValue = e.key;
 
-        nextTick(() => {
-            input.setSelectionRange(cursorPos + 1, cursorPos + 1);
-        });
+    if (
+        !newValue ||
+        ($props.maxlength &&
+            currentValue.length >= $props.maxlength &&
+            cursorPos == $props.maxlength)
+    ) {
+        return;
     }
+
+    value.value =
+        currentValue.substring(0, cursorPos) +
+        newValue +
+        currentValue.substring(cursorPos + 1);
+
+    nextTick(() => {
+        input.setSelectionRange(cursorPos + 1, cursorPos + 1);
+    });
 };
 </script>
 
diff --git a/test/cypress/integration/vnComponent/vnInput.spec.js b/test/cypress/integration/vnComponent/vnInput.spec.js
index 677e4d7da..75e06105f 100644
--- a/test/cypress/integration/vnComponent/vnInput.spec.js
+++ b/test/cypress/integration/vnComponent/vnInput.spec.js
@@ -18,4 +18,25 @@ describe('VnInput Component', () => {
             .find('input')
             .should('have.value', '9990000001');
     });
+
+    it('should replace character at cursor position in insert mode', () => {
+        // Simula escribir en el input
+        cy.dataCy('supplierFiscalDataAccount').find('input').clear();
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('4100000001');
+        // Coloca el cursor en la posición 0
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('{movetostart}');
+        // Escribe un número y verifica que se reemplace correctamente en la posicion incial
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('999');
+        cy.dataCy('supplierFiscalDataAccount')
+            .find('input')
+            .should('have.value', '9990000001');
+    });
+
+    it('should respect maxlength prop', () => {
+        cy.dataCy('supplierFiscalDataAccount').find('input').clear();
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('123456789012345');
+        cy.dataCy('supplierFiscalDataAccount')
+            .find('input')
+            .should('have.value', '1234567890'); // asumiendo que maxlength es 10
+    });
 });