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

**URL:** <https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376>\
**Category:** General\
**Created:** [October 3, 2024, 2:08pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376 "2024-10-03T14:08:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![neosri](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@neosri](https://jsonforms.discourse.group/u/neosri)\
**Post date:** [October 3, 2024, 2:08pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/1 "2024-10-03T14:08:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 3, 2024, 7:49pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/2 "2024-10-03T19:49:08Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![neosri](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@neosri](https://jsonforms.discourse.group/u/neosri)\
**Post date:** [October 7, 2024, 2:21pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/3 "2024-10-07T14:21:09Z")

</div>

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)}  
/\>

---

<div class="post-metadata">

**Author:** ![neosri](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@neosri](https://jsonforms.discourse.group/u/neosri)\
**Post date:** [October 8, 2024, 3:17pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/4 "2024-10-08T15:17:34Z")

</div>

Any help appreciated here.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 9, 2024, 5:25am UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/5 "2024-10-09T05:25:29Z")

</div>

Hi @neosri,

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

---

<div class="post-metadata">

**Author:** ![neosri](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@neosri](https://jsonforms.discourse.group/u/neosri)\
**Post date:** [October 9, 2024, 1:12pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/6 "2024-10-09T13:12:18Z")

</div>

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>
)

```

}

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 9, 2024, 2:40pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/7 "2024-10-09T14:40:35Z")

</div>

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):

```auto
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>
  );
};

```

---

<div class="post-metadata">

**Author:** ![abbas](https://avatars.discourse-cdn.com/v4/letter/a/22d042/32.png) [@abbas](https://jsonforms.discourse.group/u/abbas)\
**Post date:** [October 22, 2024, 7:44am UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/8 "2024-10-22T07:44:31Z")

</div>

> [@neosri](#):
>
> 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?

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.

---

<div class="post-metadata">

**Author:** ![neosri](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@neosri](https://jsonforms.discourse.group/u/neosri)\
**Post date:** [October 24, 2024, 9:02pm UTC](https://jsonforms.discourse.group/t/json-schema-default-value-set-on-textfield-when-trying-to-clear-the-text/2376/9 "2024-10-24T21:02:09Z")

</div>

this worked thanks Stefan