Repeated validation in ajv

General
1

I have a custom validate function passed in to “formats” option in ajv. In the console log I see that the same input is validated 8 times. Is this the expected behaviour?

[original thread by Albert Gevorgyan]

2

We do strictly one validation pass for each change. So when there are 8 validation passes there must have been 8 changes.

3

[Albert Gevorgyan]

Thanks. Actually I see 8 passes per exactly one key stroke.

4

This should not be the case. Are you sure you’re also not rendering JsonForms differently on each emitted change event?

5

[Albert Gevorgyan]

To be precise: upon each character, I see two log messages from onChange, and 8 messages from the ajv validation function. I don’t know why onChange runs twice either - but not sure it is related.

6

So you probably have two onChange events because you refeed the data coming from JsonForms back into JsonForms. I’m not sure where the four validation passes per change are coming from. Could you post an example schema, uischema, data and ajv with which this can be reproduced?

7

[Albert Gevorgyan]

This is a complete example that reproduces the error:

import React, {useState} from 'react';

import {JsonForms} from '@jsonforms/react';
import {materialCells, materialRenderers} from '@jsonforms/material-renderers';
import {createAjv} from "@jsonforms/core";


const ajv = createAjv({
    formats: {
        path: validate
    }
});

const initialState = {
    schema: {
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {
            "path": {
                "type": "string",
                "format": "path"
            }
        }
    },
    data: {},
    errors: []
};

function App() {
    const [state, setState] = useState(initialState, []);
    return (
        <div>
            <JsonForms
                schema={state.schema}
                data={state.data}
                renderers={materialRenderers}
                cells={materialCells}
                onChange={({errors, data}) => onEdit(data, errors, state, setState)}
                ajv={ajv}
            />
        </div>
    );
}

function validate(expr) {
    console.log("validating " + expr);
    return true;
}

function onEdit(data, errors, state, setState) {
    console.log("edited");
    setState({
        schema: state.schema,
        data: data,
        errors: errors
    })
}

export default App;

Below are the log messages upon typing ‘a’ in the field:

App.js:46 validating a
App.js:51 edited
App.js:46 validating a
App.js:46 validating a
App.js:46 validating a
App.js:46 validating a
App.js:46 validating a
App.js:51 edited
App.js:46 validating a
App.js:46 validating a

8

Thanks! I’ll probably take a look at this at some point next week.

9

I took a look at this issue. It turns out that the issue is caused by JSON Forms itself, so thank you very much for reporting it :slight_smile: We’ll handle this ASAP so you can expect a new JSON Forms alpha release soonish. For now you can just ignore the problem as besides the performance hit there shouldn’t be any other consequences.

10

[Albert Gevorgyan]

Thanks for looking into it. Happy to help making the product better :slight_smile: