@planning-inspectorate/dynamic-forms 3.15.2 → 3.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.15.2",
+  "version": "3.15.4",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/multi-field-input/index.njk

@@ -56,6 +56,8 @@
                                 text: inputField.hint
                             },
                             classes: inputField.classes or "govuk-input-!-width-three-quarters",
+                            inputmode: inputField.inputmode,
+                            pattern: inputField.pattern,
                             attributes: inputField.attributes
                         }) }}
                     {% endfor %}

package/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*

package/src/validator/validator.js

@@ -40,7 +40,11 @@ async function validateQuestion(questionObj, req, journeyResponse = {}) {
 		const validationRules = validation.validate(questionObj, journeyResponse);
 
 		if (validationRules instanceof Array) {
-			await Promise.all(validationRules.map((validator) => validator.run(req)));
+			// Intentionally run validators sequentially to ensure
+			// errors are collected in the same order as the rules array
+			for (const validator of validationRules) {
+				await validator.run(req);
+			}
 
 			const errors = validationResult(req);
 			const mappedErrors = errors.mapped();

package/src/validator/validator.test.js

@@ -4,6 +4,7 @@ import validate from './validator.js';
 import RequiredValidator from './required-validator.js';
 import ValidOptionValidator from './valid-option-validator.js';
 import AddressValidator from './address-validator.js';
+import DateValidator from '#src/validator/date-validator.js';
 
 describe('./src/dynamic-forms/validator/validator.js', () => {
 	let mockRes;
@@ -242,4 +243,51 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		assert.strictEqual(postcode._errors.length, 0);
 		assert.strictEqual(next.mock.callCount(), 1);
 	});
+
+	it('should display errors from a multi-field array validator in correct order (e.g., day, month, year)', async () => {
+		const req = {
+			params: {
+				section: 1,
+				question: 1,
+				referenceId: 'abc'
+			},
+			body: {
+				field1_day: '32',
+				field1_month: '13',
+				field1_year: '99'
+			}
+		};
+
+		mockRes.locals.journey = {
+			getQuestionByParams: function () {
+				return {
+					validators: [new DateValidator('the date')],
+					fieldName: 'field1'
+				};
+			}
+		};
+
+		const next = mock.fn();
+		await validate(req, mockRes, next);
+
+		const { validationResult } = await import('express-validator');
+		const errors = validationResult(req);
+		const mappedErrors = errors.mapped();
+		const errorKeys = Object.keys(mappedErrors);
+
+		// Verify all three errors exist
+		assert.strictEqual(errorKeys.includes('field1_day'), true, 'Missing day error');
+		assert.strictEqual(errorKeys.includes('field1_month'), true, 'Missing month error');
+		assert.strictEqual(errorKeys.includes('field1_year'), true, 'Missing year error');
+
+		// Verify errors are in the correct order: day, month, year
+		const dayIndex = errorKeys.indexOf('field1_day');
+		const monthIndex = errorKeys.indexOf('field1_month');
+		const yearIndex = errorKeys.indexOf('field1_year');
+
+		assert.strictEqual(dayIndex < monthIndex, true, 'Day error should come before month error');
+		assert.strictEqual(monthIndex < yearIndex, true, 'Month error should come before year error');
+
+		assert.strictEqual(next.mock.callCount(), 1);
+	});
 });

package/test/questions.js

@@ -125,8 +125,8 @@ export const questionProps = {
 		url: 'companions',
 		label: 'Companions',
 		inputFields: [
-			{ fieldName: 'name', label: 'Name', type: COMPONENT_TYPES.TEXT_ENTRY },
-			{ fieldName: 'age', label: 'Age', type: COMPONENT_TYPES.NUMBER }
+			{ fieldName: 'name', label: 'Name' },
+			{ fieldName: 'age', label: 'Age', inputmode: 'numeric', pattern: '[0-9]*' }
 		]
 	},
 	nights: {

package/test/snapshots/companions.html

@@ -22,7 +22,7 @@
   <label class="govuk-label govuk-label" for="age">
     Age
   </label>
-  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text">
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text" pattern="[0-9]*" inputmode="numeric">
 </div>
 
 

package/test/utils/question-test-utils.js

@@ -80,6 +80,18 @@ export async function createAppWithQuestions(ctx, options) {
 	return server;
 }
 
+/**
+ * Returns a mock value for an input field based on its properties.
+ * @param {Object} field - An input field descriptor (not a full question)
+ * @returns {string|number}
+ */
+function mockInputFieldValue(field) {
+	if (field.inputmode === 'numeric' || field.pattern === '[0-9]*') {
+		return 1;
+	}
+	return 'test';
+}
+
 /**
  * Build a valid payload for a question.
  * @param {import('../src/questions/question-props.js').QuestionProps} q
@@ -128,7 +140,7 @@ export function mockAnswerBody(q) {
 		case COMPONENT_TYPES.MULTI_FIELD_INPUT: {
 			const res = {};
 			for (const field of q.inputFields) {
-				res[field.fieldName] = mockAnswer(field);
+				res[field.fieldName] = mockInputFieldValue(field);
 			}
 			return res;
 		}
@@ -191,7 +203,7 @@ export function mockAnswer(q) {
 			if (q.inputFields) {
 				let res = '';
 				for (const field of q.inputFields) {
-					res += mockAnswer(field) + '<br>';
+					res += mockInputFieldValue(field) + '<br>';
 				}
 				return res;
 			}

package/types/src/components/multi-field-input/question.d.ts

@@ -26,6 +26,8 @@ export class MultiFieldInputQuestion extends Question {
         prefix?: import("../../questions/question-props.d.ts").Affix;
         hint?: string;
         classes?: string;
+        inputmode?: "decimal" | "numeric";
+        pattern?: string;
     }[];
     /**
      * returns the formatted answers values to be used to build task list elements

package/types/src/components/multi-field-input/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAkBJ;;CAyBD;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAkBJ;;CAyBD;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}

package/types/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*