Fixed issue where error messages do not have title or ui:title if a Localizer function is used. Fixes #4387.

Author: chibacchie

CHANGELOG.md

@@ -28,6 +28,10 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `getDefaultFormState()` to use the new `constAsDefaults` option to control how const is used for defaulting, fixing [#4344](https://github.com/rjsf-team/react-jsonschema-form/issues/4344), [#4361](https://github.com/rjsf-team/react-jsonschema-form/issues/4361) and [#4377](https://github.com/rjsf-team/react-jsonschema-form/issues/4377)
 - Use `experimental_customMergeAllOf` option in functions that have previously missed it.
 
+## @rjsf/validator-ajv8
+
+- Fixed issue where error messages do not have `title` or `ui:title` if a `Localizer` function is used. Fixes [#4387](https://github.com/rjsf-team/react-jsonschema-form/issues/4387)
+
 ## Dev / docs / playground
 
 - Updated the playground to add a selector for the `constAsDefaults` option

packages/validator-ajv8/src/validator.ts

@@ -90,7 +90,21 @@ export default class AJV8Validator<T = any, S extends StrictRJSFSchema = RJSFSch
     let errors;
     if (compiledValidator) {
       if (typeof this.localizer === 'function') {
+        // Missing properties need to be enclosed with quotes so that
+        // `AJV8Validator#transformRJSFValidationErrors` replaces property names
+        // with `title` or `ui:title`. See #4348, #4349, and #4387.
+        (compiledValidator.errors ?? []).forEach((error) => {
+          if (error.params?.missingProperty) {
+            error.params.missingProperty = `'${error.params.missingProperty}'`;
+          }
+        });
         this.localizer(compiledValidator.errors);
+        // Revert to originals
+        (compiledValidator.errors ?? []).forEach((error) => {
+          if (error.params?.missingProperty) {
+            error.params.missingProperty = error.params.missingProperty.slice(1, -1);
+          }
+        });
       }
       errors = compiledValidator.errors || undefined;
 

packages/validator-ajv8/test/validator.test.ts

@@ -1827,6 +1827,36 @@ describe('AJV8Validator', () => {
         });
       });
     });
+    describe('validating required fields with localizer', () => {
+      beforeAll(() => {
+        localizer = jest.fn().mockImplementation();
+        validator = new AJV8Validator({}, localizer);
+        schema = {
+          type: 'object',
+          required: ['a'],
+          properties: {
+            a: {
+              type: 'string',
+              title: 'A',
+            },
+          },
+        };
+      });
+      it('should enclose missing properties with quotes', () => {
+        const errors = validator.validateFormData({}, schema);
+        const errMessage = "must have required property 'A'";
+        expect(errors.errors[0].message).toEqual(errMessage);
+        expect(errors.errors[0].stack).toEqual(errMessage);
+        expect(errors.errorSchema).toEqual({
+          a: { __errors: [errMessage] },
+        });
+        expect(errors.errors[0].params.missingProperty).toEqual('a');
+      });
+      it('should handle the case when errors are not present', () => {
+        const errors = validator.validateFormData({ a: 'some kind of text' }, schema);
+        expect(errors.errors).toHaveLength(0);
+      });
+    });
   });
   describe('validator.validateFormData(), custom options, localizer and Ajv2019', () => {
     let validator: AJV8Validator;