El encargo era pequeño y estaba claro: en el panel de facturación de una asesoría, el campo del importe tenía que enseñar los miles con punto y los decimales con coma mientras se teclea. Escribes 1234 y ves 1.234. Media tarde, como mucho.
Formatear no tiene misterio. Te quedas con los dígitos, reinsertas los puntos cada tres, escribes el resultado de vuelta en el campo. Probé tecleando importes de corrido y salía impecable.
Luego lo usó Marta, que es quien mete las facturas de verdad. Y Marta no escribe de corrido: escribe, se equivoca y corrige. Picó 15.000, vio que eran 1.500 y borró un cero de en medio.
- Pone el cursor entre el 5 y el primer 0 y pulsa Backspace.
- El valor queda en 1500, y mi código lo reformatea a 1.500.
- Al reescribir el contenido del campo, el cursor se va al final.
- Ella sigue borrando, convencida de que está donde lo dejó, y se come los ceros buenos.
Lo intentó tres veces antes de decirme nada. Las tres acabó vaciando el campo y empezando de cero. Un formateo que te obliga a reescribir el número entero cada vez que te equivocas no está ayudando: está estorbando.
El cursor no va por caracteres, va por dígitos
El error de bulto es pensar que la posición del cursor es un número estable. No lo es: al reformatear, los puntos se mueven, así que el carácter número siete de antes y el de después no son el mismo sitio.
Lo que sí se conserva es cuántos dígitos quedan a la izquierda del cursor. Cuentas eso antes de tocar nada, reformateas, y recolocas el cursor en la posición donde vuelva a haber ese mismo número de dígitos por delante. Y un caso aparte: si pulsas Backspace justo encima de un punto, lo que quieres borrar no es el separador, es el dígito anterior.
Dónde ayudó el modelo local
No escribiendo el componente, que son cuatro funciones. Ayudó en lo que da pereza: le pedí una tabla de casos con valor de partida, posición del cursor, tecla pulsada, valor esperado y posición esperada.
Salieron los que yo no había mirado. Pegar «1 234,50 €» copiado de una hoja de cálculo. Escribir una segunda coma decimal. Seleccionar tres caracteres y sobrescribirlos. Supr en lugar de Backspace, que se lleva el punto hacia el otro lado.
Los convertí en tests tal cual. Pasaron cinco de nueve. Los cuatro que fallaban eran precisamente correcciones en medio del número, que es todo lo que hace alguien que factura.
Y aquí está lo que me importa del sitio donde corre esto: para pedir esos casos tuve que pegar el componente entero, con los nombres de los campos, las reglas de importe de la asesoría y un par de detalles de su modelo de datos. Eso no es mi código, es el de un cliente. En un chat remoto sería material subido a un tercero sin que nadie me haya autorizado a ello. Dentro de la pestaña, no salió una sola línea del portátil.
Elffuss Code es un IDE con el modelo corriendo dentro del navegador: abres una pestaña, pegas el componente de un cliente y le pides los casos límite sin que el código ni el prompt salgan de tu máquina.
Abrir Code →