JSON Schema default value set on TextField when trying to clear the text

General
1

I was using JSONForms to render the following schema. I am using the latest ajv, using the material cells and material renderers
{
“type”: “object”,
“title”: “Person”,
“required”: [
“name”
],
“properties”: {
“name”: {
“type”: “string”,
“default”: “test”
}
}
}

//ajv for defaults and validators

const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false })

AjvErrors(ajv, { singleError: false })

<JsonForms
schema={inputJsonSchema}
data={data}
renderers={renderers}
ajv={ajv}
cells={cells}
onChange={({ data, errors }) => onChange(data, errors)}
/>
Data is just an empty object.
So the form renders with name as a text field with default value ‘test’. If I try to press the backspace to clear the text , when the field becomes empty, the default value gets set to ‘test’ again. I know we have a endAdornment to clear text, but not all users would be using that. Can you please let me know if we can set the default only on load of the form or allow clearing of the control using key strokes?

2

Hi @neosri,

We validate every data change and AJV with useDefaults: true will always place a value into the data if it’s undefined.

If you only need to set the defaults initially, then I recommend to validate the data once outside of JSON Forms with your custom AJV and then handing in an AJV instance to JSON Forms without the useDefaults.

3

I tried setting the ajv outside of json forms like the following but still no luck, any sample that you could provide?

var ajv = new Ajv({ allErrors: true, strict: false, useDefaults: true, coerceTypes: true })
AjvErrors(ajv, { singleError: false })
const validate = ajv.compile(inputJsonSchema)
validate(data)
this data and schema is passed to json forms component after the following is done.

const ajvWithoutDefault = new Ajv({
allErrors: true,
strict: false,
coerceTypes: true
})
AjvErrors(ajvWithoutDefault, { singleError: false })

<JsonForms
schema={inputJsonSchema}
data={data}
renderers={renderers}
ajv={ajvWithoutDefault}
uischema={inputUIschema}
cells={cells}
onChange={({ data, errors }) => onChange(data, errors)}
/>

4

Any help appreciated here.

5

Hi @neosri,

Looks good to me. What exactly does not work for you?

6

here is a sample code: defaults reset happens in handleFormChange1

PARENT COMPONENT
const inputSchema = {
type: ‘object’,
required: [‘demo’],
properties: {
demo: {
title: ‘Configuration’,
type: ‘object’,
required: [‘name’],
properties: {
‘name’: {
title: ‘name’,
type: ‘string’,
default: ‘test’
}
},
default: {}
}
}
}

const appdatas = { demo: { ‘description’: ‘test333’ }}
const [appdata1, setAppData1] = useState(appdatas)

const handleFormChange1 = (data: object, errors: any) => {
	console.log('data:', data)  //here we get the correct data
	setAppData1(data)   /after this the data gets reset with defaults
	console.log(errors)
}

<CustomFORM inputJsonSchema={inputSchema} data={appdata1} onChange={handleFormChange1} />

JSON FORM WRAPPER
const CustomFORM= ({
jsonSchema,
uischema,
data,
onChange
}: FormProps): JSX.Element => {

const ajv1 = new Ajv({ allErrors: true, useDefaults: true, strict: false })
const ajvnew = AjvErrors(ajv1, { singleError: false })
ajvnew.validate(jsonSchema, data)

const ajv = new Ajv({ allErrors: true, useDefaults: false, strict: false })
AjvErrors(ajv, { singleError: false })

return (
	<div>
		<JsonForms
			schema={jsonSchema}
			data={data}
			renderers={renderers}
			ajv={ajv}
			uischema={uischema}
			cells={cells}
			onChange={({ data, errors }) => onChange(data, errors)}
		/>
	</div>
)

}

7

The ajv useDefaults invocation is executed with every rerender of your component, therefore the default values are also re-appearing every time.

Note that by handing over a new AJV instance every time you rerender JSON Forms you also re-execute the validation on every rerender.

I would like to suggest the following changes:

  • make sure to only add the defaults once
  • make sure to memoize ajv

The result could look like this (untested):

import {createAjv} from '@jsonforms/core';

const CustomFORM = ({ jsonSchema, uischema, initialData, onChange }) => {
  const [data, setData] = useState(() => {
    const ajvWithDefaults = AjvErrors(createAjv({useDefaults: true}), { singleError: false});
    ajvWithDefaults.validate(jsonSchema, initialData);
    return initialData;
  });
  const ajvWithErrors = useMemo(() => AjvErrors(createAjv(), { singleError: false}), []);

  return (
    <div>
      <JsonForms
        schema={jsonSchema}
        data={data}
        renderers={renderers}
        ajv={ajvWithErrors}
        uischema={uischema}
        cells={cells}
        onChange={({ data, errors }) => {
          onChange(data, errors);
          setData(data);
        }}
      />
    </div>
  );
};
8

To prevent the default value from resetting every time the field is cleared, you can apply the default value only when the form is initially loaded. One solution is to remove the "useDefaults: true" from the AJV configuration and instead manually set the default value on the form’s first render:

  1. Initialize the data with default values before passing it to the form.
  2. Update the data only when users make changes, allowing them to clear fields using backspace.

This prevents AJV from continuously applying the default.

9

this worked thanks Stefan