Feature - (@rjsf/core) Reset form data, validations and errors (rjsf-team#3492)

* Reset function added to form / Test cases added * Clear validations and errors/ playground reset btn * Reset func description edit * Playground reset btn title edit * Test widgets schema edited file extention * Test description changed * Child ref declarations changed with createRef * Reset operations resetErrors func removed * 5.3.0 version CHANGELOG.md added --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Author: sarpere

CHANGELOG.md

@@ -16,6 +16,16 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.3.0
+
+## @rjsf/core
+
+- `Reset` function added for `Programmatically Reset` action. `Reset` function will reset form data and validation errors. Form data will set to default values.
+
+## Dev / docs / playground
+
+- Added `Programmatically Reset` button to clear states which are form data and validation errors.
+
 # 5.2.1
 
 ## @rjsf/antd

packages/core/src/components/Form.tsx

@@ -535,6 +535,27 @@ export default class Form<
  this.setState(state as FormState<T, S, F>, () => onChange && onChange({ ...this.state, ...state }, id));
  };
 
+ /**
+ * Callback function to handle reset form data.
+ * - Reset all fields with default values.
+ * - Reset validations and errors
+ *
+ */
+ reset = () => {
+ const { onChange } = this.props;
+ const newState = this.getStateFromProps(this.props, undefined);
+ const newFormData = newState.formData;
+ const state = {
+ formData: newFormData,
+ errorSchema: {},
+ errors: [] as unknown,
+ schemaValidationErrors: [] as unknown,
+ schemaValidationErrorSchema: {},
+ } as FormState<T, S, F>;
+
+ this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+ };
+
  /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
  * was provided.
  *

packages/core/test/Form.test.jsx

@@ -16,6 +16,7 @@ import {
  describeRepeated,
  submitForm,
 } from './test_utils';
+import widgetsSchema from './widgets_schema.json';
 
 describeRepeated('Form common', (createFormComponent) => {
  let sandbox;
@@ -3912,4 +3913,98 @@ describe('Form omitExtraData and liveOmit', () => {
  expect(node.querySelector('#root_1').getAttribute('value')).to.eq('test');
  });
  });
+
+ describe('Calling reset from ref object', () => {
+ it('Reset API test', () => {
+ const schema = {
+ title: 'Test form',
+ type: 'string',
+ };
+ const formRef = React.createRef();
+ const props = {
+ ref: formRef,
+ schema,
+ };
+ const { node } = createFormComponent(props);
+ expect(formRef.current.reset).to.exist;
+ expect(node.querySelector('input')).to.exist;
+ Simulate.change(node.querySelector('input'), { target: { value: 'Some Value' } });
+ formRef.current.reset();
+ expect(node.querySelector('input').getAttribute('value')).to.eq('');
+ });
+
+ it('Clear errors', () => {
+ const schema = {
+ title: 'Test form',
+ type: 'number',
+ };
+ const formRef = React.createRef();
+ const props = {
+ ref: formRef,
+ schema,
+ };
+ const { node, comp } = createFormComponent(props);
+ expect(formRef.current.reset).to.exist;
+ expect(node.querySelector('input')).to.exist;
+ Simulate.change(node.querySelector('input'), { target: { value: 'Some Value' } });
+ expect(comp.state.errors).to.have.length(0);
+ Simulate.submit(node);
+ expect(comp.state.errors).to.have.length(1);
+ expect(node.querySelector('.errors')).to.exist;
+ formRef.current.reset();
+ expect(node.querySelector('.errors')).not.to.exist;
+ expect(node.querySelector('input').getAttribute('value')).to.eq('');
+ expect(comp.state.errors).to.have.length(0);
+ });
+
+ it('Reset button test with default value', () => {
+ const schemaWithDefault = {
+ title: 'Test form',
+ type: 'string',
+ default: 'Some-Value',
+ };
+ const formRef = React.createRef();
+ const props = {
+ ref: formRef,
+ schema: schemaWithDefault,
+ };
+ const { node } = createFormComponent(props);
+ const input = node.querySelector('input');
+ expect(formRef.current.reset).to.exist;
+ expect(input).to.exist;
+ expect(input.getAttribute('value')).to.eq('Some-Value');
+ formRef.current.reset();
+ expect(input.getAttribute('value')).to.eq('Some-Value');
+ Simulate.change(input, { target: { value: 'Changed value' } });
+ formRef.current.reset();
+ expect(input.getAttribute('value')).to.eq('Some-Value');
+ });
+
+ it('Reset button test with complex schema', () => {
+ const schema = widgetsSchema;
+ const formRef = React.createRef();
+ const props = {
+ ref: formRef,
+ schema,
+ };
+ const { node } = createFormComponent(props);
+ const checkbox = node.querySelector('input[type="checkbox"]');
+ const input = node.querySelector('input[type="text"]');
+ expect(formRef.current.reset).to.exist;
+ expect(checkbox).to.exist;
+ expect(input).to.exist;
+ expect(checkbox.checked).to.eq(true);
+ expect(input.getAttribute('value')).to.eq('');
+ formRef.current.reset();
+ expect(checkbox.checked).to.eq(true);
+ expect(input.getAttribute('value')).to.eq('');
+ Simulate.change(checkbox, { target: { checked: false } });
+ Simulate.change(input, { target: { value: 'Changed value' } });
+ expect(checkbox.checked).to.eq(false);
+ expect(input.getAttribute('value')).to.eq('Changed value');
+ formRef.current.reset();
+ expect(input.getAttribute('value')).to.eq('');
+ expect(checkbox.checked).to.eq(true);
+ });
+ });
 });

packages/core/test/widgets_schema.json

@@ -0,0 +1,84 @@
+{
+ "title": "Widgets",
+ "type": "object",
+ "properties": {
+ "stringFormats": {
+ "type": "object",
+ "title": "String formats",
+ "properties": {
+ "email": {
+ "type": "string",
+ "format": "email"
+ },
+ "uri": {
+ "type": "string",
+ "format": "uri"
+ }
+ }
+ },
+ "boolean": {
+ "type": "object",
+ "title": "Boolean field",
+ "properties": {
+ "default": {
+ "type": "boolean",
+ "title": "checkbox (default)",
+ "description": "This is the checkbox-description",
+ "default": true
+ },
+ "radio": {
+ "type": "boolean",
+ "title": "radio buttons",
+ "description": "This is the radio-description"
+ },
+ "select": {
+ "type": "boolean",
+ "title": "select box",
+ "description": "This is the select-description"
+ }
+ }
+ },
+ "string": {
+ "type": "object",
+ "title": "String field",
+ "properties": {
+ "default": {
+ "type": "string",
+ "title": "text input (default)"
+ },
+ "textarea": {
+ "type": "string",
+ "title": "textarea"
+ },
+ "placeholder": {
+ "type": "string"
+ },
+ "color": {
+ "type": "string",
+ "title": "color picker",
+ "default": "#151ce6"
+ }
+ }
+ },
+ "secret": {
+ "type": "string",
+ "default": "I'm a hidden string."
+ },
+ "disabled": {
+ "type": "string",
+ "title": "A disabled field",
+ "default": "I am disabled."
+ },
+ "readonly": {
+ "type": "string",
+ "title": "A readonly field",
+ "default": "I am read-only."
+ },
+ "readonly2": {
+ "type": "string",
+ "title": "Another readonly field",
+ "default": "I am also read-only.",
+ "readOnly": true
+ }
+ }
+}

packages/playground/src/app.jsx

@@ -527,6 +527,15 @@ class Playground extends Component {
  >
  Prog. Validate
  </button>
+ <button
+ title='Click me to reset the form programmatically.'
+ className='btn btn-default'
+ type='button'
+ onClick={() => this.playGroundForm.current.reset()}
+ >
+ Prog. Reset
+ </button>
+ <span> </span>
  <div style={{ marginTop: '5px' }} />
  <CopyLink shareURL={this.state.shareURL} onShare={this.onShare} />
  </div>