Cómo prevenir que se muestre un punto decimal al perder el foco en entradas numéricas

Los campos de entrada de tipo número son herramientas útiles para recoger datos en aplicaciones web, especialmente cuando se requieren valores decimales. Sin embargo, es común encontrar un problema visual que puede afectar la experiencia del usuario: el punto decimal final que se muestra en el campo incluso después de que se pierde el foco, lo que puede causar confusión. En este artículo, exploraremos cómo abordar y solucionar este problema.

El problema del punto decimal

Cuando se utiliza un campo de entrada numérica con un atributo step para valores decimales, como al ingresar "1.2" y luego eliminar el "2", muchas veces el campo mostrará "1." en lugar de simplemente "1". Esto sucede porque el estilo visual del campo no se actualiza para reflejar el valor real del estado interno. Este problema no solo se presenta en aplicaciones React, sino que también ocurre en entradas HTML estándar.

Soluciones para evitar la inconsistencia visual

Para resolver este problema, podemos implementar un manejo adecuado de los eventos de enfoque y desenfoque en nuestro campo de entrada. Aquí están algunos pasos que puedes seguir:

1. Actualizar el valor al desenfocar: Cuando el usuario pierde el foco en el campo de entrada, es necesario actualizar el valor mostrado. Esto se puede lograr usando el evento onBlur.

2. Formato al desenfoque: Podemos formatear el valor antes de establecerlo en el estado. Esto se puede hacer eliminando cualquier punto decimal no deseado.

3. Ejemplo de código: A continuación se muestra un ejemplo de cómo implementar esta solución en React:

function Example() {
  const [value, setValue] = React.useState('');

  const handleBlur = () => {
    // Eliminamos el punto decimal si no hay otros dígitos después
    if (value.endsWith('.')) {
      setValue(value.slice(0, -1));
    }
  };

  return (
    <div>
      <label>
        Ingresa un número decimal <br />(intenta escribir "1.2" y luego elimina el "2"):
        <br /><br />
        <input
          type="number"
          step="0.01"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
          onBlur={handleBlur}
          style={{ padding: '5px', margin: '5px 0' }}
        />
      </label>
      <div style={{ marginTop: '10px' }}>
        <p><strong>Valor en estado:</strong> "{value}"</p>
      </div>
    </div>
  );
}

// Renderizar el componente
ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

Conclusión

Al implementar un manejo adecuado de eventos en el campo de entrada, puedes prevenir que se muestre un punto decimal no deseado una vez que el campo pierde el foco. Este simple ajuste mejora la experiencia del usuario y asegura que el valor visualizado refleje con precisión el valor almacenado. Mantener la consistencia entre el valor interno y lo que el usuario ve es crucial para la usabilidad de la aplicación.