Validation error messages not using `ui:title` in `anyOf` option field errors with external validation

[TheOneTheOnlyJJ]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5.22.3

Current Behavior

Error messages do not use their ui:title property if they come from the option of an anyOf block (when using external form validation), contradicting #3337.

Expected Behavior

Error messages do use their ui:title property if they come from the option of an anyOf block (when using external form validation), as stated in #3337.

Steps To Reproduce

See here: https://codesandbox.io/p/sandbox/63w9vm (Codesandbox)

Environment

- OS: Windows 10
- Node: 20.19.0
- npm: 10.8.2

Anything else?

Here, both optionA1stField and optionA2ndField have ui:title defined in their UiSchema; as you can see, their raw property name is used instead of the titles.

[TheOneTheOnlyJJ]

I can confirm this happens in v5.22.4 as well.

Does anyone have a fix for this?
Due to this, my UI looks unpolished, and changing the field names is not a viable option in my project.

[nickgros]

I think the issue is in the ajv8 package in the transformRJSFValidationErrors function. This code transforms the field names to the friendly name provided by the schema, but it doesn't attempt to resolve the schema, so any polymorphic or conditional fields won't work.

I don't think we have any utility to try to go from a property path in the formData/error message to the original schema object, so this might be challenging to solve.

As a workaround, you might be able to hard-code the title in the uiSchema, but if you can't update the schema then updating the uiSchema might not be viable either.

[TheOneTheOnlyJJ]

As a workaround, you might be able to hard-code the title in the uiSchema, but if you can't update the schema then updating the uiSchema might not be viable either.

The Codesandbox example I provided is very similar to my actual schemas. I can change the uiSchema freely, but not the JSON schema it is based upon.
Does the base transform errors function you point to not change all property names to their titles already, if said titles are provided? I struggle to notice the problem in the code.

[TheOneTheOnlyJJ]

Also, I know this is unrelated, but as a side note:
Does anyone know how to make the dropdown menu selector widget wider? Even in the picture, you can see how its title is cropped and truncated with ... . I would like to make it wider, but couldn't find the right utility function or uiSchema property or selector to target it properly.

[TheOneTheOnlyJJ]

Hey @chibacchie, I noticed you solved #4387, which may have similarities to this issue, as it's also related to ui:title.
Would you please drop your thoughts on this here? Maybe your input could give us a lead.

[chibacchie]

@TheOneTheOnlyJJ #4387 looks similar issue to this but the cause may be completely different.

#4387 was a side effect of #4349. Transforming properties names to title or ui:title is done by transformRJSFValidationErrors and transformRJSFValidationErrors expects property names are enclosed with quotes (see here) in error messages. However, localizer (more specifically ajv-i18n) does not enclose property names. Thus, I added a workaround to temporarily enclose property names that are referred for constructing error messages in ajv-i18n.

The cause of this issue is that as @nickgros said, it is not possible to retrieve ui:title in transformRJSFValidationErrors if anyOf is used. Unfortunately, I don't have any solution to this issue at this point.

[TheOneTheOnlyJJ]

Thank you for your input?
Do you think the best option now would be to open an issue at ajv?

[chibacchie]

I think a possible fix might be to get UI options by schemaPath instead of property (instancePath).

diff --git a/packages/validator-ajv8/src/processRawValidationErrors.ts b/packages/validator-ajv8/src/processRawValidationErrors.ts
index cbb95081..c29d2921 100644
--- a/packages/validator-ajv8/src/processRawValidationErrors.ts
+++ b/packages/validator-ajv8/src/processRawValidationErrors.ts
@@ -40,7 +40,8 @@ export function transformRJSFValidationErrors<
     if ('missingProperty' in params) {
       property = property ? `${property}.${params.missingProperty}` : params.missingProperty;
       const currentProperty: string = params.missingProperty;
-      const uiSchemaTitle = getUiOptions(get(uiSchema, `${property.replace(/^\./, '')}`)).title;
+      const uiSchemaPath = schemaPath.replaceAll('properties/', '').split('/').slice(1, -1).concat([currentProperty]);
+      const uiSchemaTitle = getUiOptions(get(uiSchema, uiSchemaPath)).title;

       if (uiSchemaTitle) {
         message = message.replace(`'${currentProperty}'`, `'${uiSchemaTitle}'`);

However...

1. This might be only applicable in the case missingProperty exists.
2. As schemaPath is not stable (see ajv-validator/ajv#512), this may cause unexpected results occasionally.