Missing uiSchema When TransformingErrors

[Bedrock02]

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 or a shared playground link demonstrating the issue.

What theme are you using?

core

Version

^4.2.4

Current Behavior

For required properties in a schema, we are unable to transform errors. Our transformer relies on attributes from the uiSchema to render a message with ui:title. The error AjvError provides the incorrect object, or will not provide the uiSchema at all.

Expected Behavior

1. uiSchema provided by the AjvError object will always have the correct uiSchema
2. uiSchema should reflect the current error

Steps To Reproduce

1. Create a simple schema like so

schema: {
      title: 'Colors',
      type: 'object',
      required: ['favColor'],
      properties: {
        faveColor: {
          type: 'string',
          title: 'Enter your Favorite Color',
        }
      }
    },
uiSchema: {
      faveColor: {
        'ui:title': 'Favorite color'
      }
    }

2. Create an RJSF Form and pass the schema and uiSchema into the form
3. Provide a transformError function that takes in errors the current uiSchema
4. Render the Form
5. Attempt to submit the form with no data (or have liveValidate={true})

Environment

- OS: 12.1
- Node: v16.17.0
- npm: 8.15.0

Anything else?

https://jsfiddle.net/Bedrock02/06nu13gq/57/

[heath-freenome]

@Bedrock02 since the transformError function and uiSchema are both passed to the Form you already have access to the uiSchema outside of the form. Can't you simply make sure that your transformError function is already using the uiSchema. If you need to you could so something like this:

const schema = { ... }; // Your schema
const uiSchema = { ... }; // Your uiSchema
function tranformHandler(errors) {
  return transformErrors(errors, uiSchema); // <- Your function that needs the uiSchema
}
...

<Form schema={schema} uiSchema={uiSchema} transformErrors={transformHandler} />

[Bedrock02]

@heath-freenome did you get a chance to look at the jsfiddle I provided? I'm doing just that

// Here we are passing in the uiSchema to a closure function,
// Which returns a function that would take in those errors.

const transformErrors = (uiSchema) => {
  return (errors) => {
    return errors.map(error => {
      const propertyUiSchema = getUiSchemaFromProperty(error.property, uiSchema)

      const customError = generateCustomError(error, propertyUiSchema)
      if (customError) error.message = customError

      return error
    })
  }
}

// Used on the form
        <Form
          schema={schema}
          uiSchema={uiSchema}
          transformErrors={transformErrors(uiSchema)} 

[heath-freenome]

@Bedrock02 so you have a bug in your jsfiddle... the property is faveColor but your required says favColor. Fixing that gives something that works, although it does things differently than what you expect

[Bedrock02]

Thanks @heath-freenome. This issue smells like something is happening on our end. Will update once we figure this out.

[Bedrock02]

@heath-freenome seems to be an error state race condition happening on load. It is only effecting required and no other validation rule. Since on render the input is set to an empty string, it will trigger an error.