@inseefr/lunatic 0.3.3-experimental → 0.3.4-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.3-experimental",
+	"version": "0.3.4-experimental",
 	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {

package/src/components/declarations/wrappers/input-declarations-wrapper.js

@@ -173,12 +173,22 @@ const InputDeclarationsWrapper = ({
 							onChange={(e) => {
 								const v = e.target.value;
 								const valueToFire = v === '' ? null : v;
+								const valueToFireForArrows =
+									Number.parseFloat(v).toFixed(decimals);
 								if (
+									decimals &&
+									v !== '' &&
+									!new RegExp(`^[0-9]+(.[0-9]{1,${decimals}})?$`).test(
+										valueToFireForArrows
+									)
+								) {
+									e.preventDefault();
+								} else if (
 									(([null, ''].includes(v) && value.length > 0) ||
 										([null, ''].includes(value) && v.length > 0)) &&
 									componentType !== 'Datepicker'
 								) {
-									setValue(v);
+									setValue(valueToFire);
 									handleChange({
 										[U.getResponseName(response)]: valueToFire,
 									});
@@ -188,11 +198,16 @@ const InputDeclarationsWrapper = ({
 										'Event' &&
 										roleType !== 'datepicker') ||
 									// FF hack: impossible to handle arrow events
-									(Math.abs(v - value) !== 0 && isInputNumber)
+									(Math.abs(v - value).toFixed(decimals) !==
+										Number.parseFloat(`${Math.pow(10, -decimals)}`).toFixed(
+											decimals
+										) &&
+										!Number.parseInt(v, 10) &&
+										isInputNumber)
 								) {
-									setValue(valueToFire);
+									setValue(valueToFireForArrows);
 									handleChange({
-										[U.getResponseName(response)]: valueToFire,
+										[U.getResponseName(response)]: valueToFireForArrows,
 									});
 								} else {
 									if (isInputNumber) {
@@ -212,6 +227,11 @@ const InputDeclarationsWrapper = ({
 							}}
 							onBlur={handleChangeOnBlur}
 							onFocus={handleFocusIn}
+							onKeyPress={(event) => {
+								if (decimals === 0 && !/[0-9]/.test(event.key)) {
+									event.preventDefault();
+								}
+							}}
 						/>
 						{isInputNumber && unit && unitPosition === 'AFTER' && (
 							<span className="unit">{unit}</span>

package/src/components/input/input-number.js

@@ -6,11 +6,12 @@ import { areEqual } from '../../utils/lib';
 import { getTypeControls } from '../component-wrapper/controls/validators';
 import './input.scss';
 
-const InputNumber = ({ numberAsTextfield, ...props }) => (
+const InputNumber = ({ numberAsTextfield, decimals, ...props }) => (
 	<InputDeclarationsWrapper
 		type={numberAsTextfield ? 'text' : 'number'}
 		roleType="input"
 		{...props}
+		decimals={decimals || 0}
 		isInputNumber
 		numberAsTextfield
 		validators={[getTypeControls]}