Fields with dots in their names not receiving errors

[kestarumper]

Problem description

The issue happens with

• "uniforms": "3.8.1",
• "uniforms-bridge-json-schema": "3.8.1"

Individual field errors are not passed to the fields. This causes them to not display the inline error message nor highlight it (in some cases it even displays the field as "green" indicating that everything is OK). The issue happens in JSONSchemaBridge with the use of Ajv as a validator. Note: The schema validations are still performed (all invalid ones are found) and any errors are displayed by <ErrorsField />.

Technical observation

The field names (field paths, instancePath) produced by Ajv are not escaped the way uniforms do this. For example, Ajv will set the error.instancePath as "/nested.field". This causes problems in JSONSchemaBridge.getError because the escaped field name and instancePath don't match.

Reproduction

• Codesandbox

Screenshot

Example JSONSchema

{
  type: "object",
  properties: {
    regularRequired: {
      type: "string"
    },
    "nested.required": {
      type: "string"
    },

    regularMinLength: {
      type: "string",
      minLength: 5,
      default: "koń",
    },
    "nested.minLength": {
      type: "string",
      minLength: 5,
      default: "koń",
    }
  },
  required: ["nested.required", "regularRequired"]
}

Half-solution (semi-workaround)

import get from 'lodash/get';
import { joinName } from 'uniforms';
import JSONSchemaBridge from 'uniforms-bridge-json-schema';

function pathToName(path: string) {
  path = path.startsWith('/')
    ? path.replace(/\//g, '.').replace(/~0/g, '~').replace(/~1/g, '/')
    : path
        .replace(/\[('|")(.+?)\1\]/g, '.$2')
        .replace(/\[(.+?)\]/g, '.$1')
        .replace(/\\'/g, "'");

  return path.slice(1);
}

export class CustomJSONSchemaBridge extends JSONSchemaBridge {
  getError(name: string, error: any) {
    const details = error?.details;
    if (!Array.isArray(details)) {
      return null;
    }

    const nameParts = joinName(null, name);
    const rootName = joinName(nameParts.slice(0, -1));
    const _baseName = nameParts[nameParts.length - 1];
    const baseName = _baseName.includes('.')
      ? pathToName(_baseName)
      : _baseName;

    function findScopedError(error: any) {
      const path = pathToName(error.instancePath ?? error.dataPath);
      const _name = name.includes('.') ? pathToName(name) : name;
      const nameMatchesPath = _name === path;
      const rootMatchesPath = rootName === path;
      const baseNameMatchesMissingProperty =
        baseName === error.params.missingProperty;

      const childErrors = error.params.errors;

      const matches =
        nameMatchesPath || (rootMatchesPath && baseNameMatchesMissingProperty);

      return matches || !!childErrors?.some(findScopedError);
    }

    const scopedError = details.find(findScopedError);

    return scopedError || null;
  }
}