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,8 +106,17 @@ const handleInsertMode = (e) => {
 
     let currentValue = value.value;
     if (!currentValue) currentValue = e.key;
-    const newValue = Number(e.key);
+    const newValue = e.key;
-    if (newValue && !isNaN(newValue)) {
+
+    if (
+        !newValue ||
+        ($props.maxlength &&
+            currentValue.length >= $props.maxlength &&
+            cursorPos == $props.maxlength)
+    ) {
+        return;
+    }
+
     value.value =
         currentValue.substring(0, cursorPos) +
         newValue +
@@ -110,7 +125,6 @@ const handleInsertMode = (e) => {
     nextTick(() => {
         input.setSelectionRange(cursorPos + 1, cursorPos + 1);
     });
-    }
 };
 </script>
 

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
+    });
 });