Feature: Performance optimization, live validate/omit onBlur

Added support to make live validate and live omit work during the `onBlur` phase rather than `onChange`
- In `@rjsf/core`:
  - Updated `FormProps` to add new `onChange`/`onBlur` values for the `liveValidate` and `liveOmit` props, deprecating the `boolean` aspect of them
  - Updated `Form` to support the new feature to do `onBlur` handling of `liveValidate` and `liveOmit`
  - Updated the tests to verify the new behavior
- Updated the playground to switch `liveValidate` and `liveOmit` from checkboxes to radio buttons for the new options
- Updated `form-props.md` and `v6x upgrade guide.md` to document the new feature and deprecation
- Updated the `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -15,6 +15,17 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.0.0-beta.23
+
+## @rjsf/core
+
+- Updated `FormProps` to add new `onChange`/`onBlur` values for the `liveValidate` and `liveOmit` props, deprecating the `boolean` aspect of them
+- Updated `Form` to support the new feature to do `onBlur` handling of `liveValidate` and `liveOmit`
+
+## Dev / docs / playground
+- Updated the playground to switch `liveValidate` and `liveOmit` from checkboxes to radio buttons for the new options
+- Updated `form-props.md` and `v6x upgrade guide.md` to document the new feature and deprecation
+
 # 6.0.0-beta.22
 
 ## @rjsf/antd
@@ -44,7 +55,7 @@ should change the heading of the (upcoming) version to include a major version b
 - BREAKING CHANGE: Updated `ArrayFieldTemplate` to remove the `ArrayFieldItemTemplate` render in favor of simply using `items` due to `ArrayField` changes
 - BREAKING CHANGE: Updated `ArrayFieldItemButtonsTemplate` to replace the old callback-generator functions with the new memoizable callback functions
 - Fixed a bug in `Form` to avoid getting errors being reported at the root level via `onChange` when there aren't
-- Refactored LayoutGridField as function components instead of a single class component.
+- Refactored `LayoutGridField` as function components instead of a single class component.
 
 ## @rjsf/daisyui
 
@@ -127,8 +138,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated the `utility-functions.md` documentation to add the new `useDeepCompareMemo()` hook
 - Updated the `v6.x upgrade guide.md` documentation to add the BREAKING CHANGES to the `ArrayFieldTemplateProps`, `ArrayFieldItemTemplateType`, `ArrayFieldItemButtonsTemplateType`,  `FieldTemplateProps`, `ObjectFieldTemplateProps` and `WrapIfAdditionalTemplateProps` interface props changes and the `useDeepCompareMemo()` hook
 - Added documentation for the `nameGenerator` prop in `form-props.md` and v6.x upgrade guide
-- Updated '@rjsf/snapshot-tests' package to explicitly depend on '@rjsf/core' to build first, fixing an error with parallelized builds
-
+- Updated `@rjsf/snapshot-tests` package to explicitly depend on `@rjsf/core` to build first, fixing an error with parallelized builds
 
 # 6.0.0-beta.21
 

packages/core/src/components/Form.tsx

@@ -168,14 +168,28 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
    */
   noValidate?: boolean;
-  /** If set to true, the form will perform validation and show any validation errors whenever the form data is changed,
-   * rather than just on submit
+  /** Flag that describes when live validation will be performed. Live validation means that the form will perform
+   * validation and show any validation errors whenever the form data is updated, rather than just on submit.
+   *
+   * If no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for
+   * the flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`
+   * is provided, then live validation will be performed when a field that was updated is blurred (as a performance
+   * optimization).
+   *
+   * @deprecated - In a future major release, the `boolean` options for this flag will be removed
    */
-  liveValidate?: boolean;
-  /** If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field
-   * will be removed whenever `onChange` is called. Set to `false` by default
+  liveValidate?: boolean | 'onChange' | 'onBlur';
+  /** Flag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to
+   * to `true` and the form's data is updated by the user.
+   *
+   * If no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for
+   * the flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`
+   * is provided, then live omit will be performed when a field that was updated is blurred (as a performance
+   * optimization).
+   *
+   * @deprecated - In a future major release, the `boolean` options for this flag will be removed
    */
-  liveOmit?: boolean;
+  liveOmit?: boolean | 'onChange' | 'onBlur';
   /** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
    * called. Set to `false` by default.
    */
@@ -834,11 +848,11 @@ export default class Form<
       retrievedSchema = newState.retrievedSchema;
     }
 
-    const mustValidate = !noValidate && liveValidate;
+    const mustValidate = !noValidate && (liveValidate === true || liveValidate === 'onChange');
     let state: Partial<FormState<T, S, F>> = { formData, schema };
     let newFormData = formData;
 
-    if (omitExtraData === true && liveOmit === true) {
+    if (omitExtraData === true && (liveOmit === true || liveOmit === 'onChange')) {
       newFormData = this.omitExtraData(formData);
       state = {
         formData: newFormData,
@@ -944,16 +958,52 @@ export default class Form<
   };
 
   /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-   * was provided.
+   * was provided. Also runs any live validation and/or live omit operations if the flags indicate they should happen
+   * during `onBlur`.
    *
    * @param id - The unique `id` of the field that was blurred
    * @param data - The data associated with the field that was blurred
    */
   onBlur = (id: string, data: any) => {
-    const { onBlur } = this.props;
+    const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
     if (onBlur) {
       onBlur(id, data);
     }
+    if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
+      const { onChange, extraErrors } = this.props;
+      const { formData } = this.state;
+      let newFormData: T | undefined = formData;
+      let state: Partial<FormState<T, S, F>> = { formData: newFormData };
+      if (omitExtraData === true && liveOmit === 'onBlur') {
+        newFormData = this.omitExtraData(formData);
+        state = { formData: newFormData };
+      }
+      if (liveValidate === 'onBlur') {
+        const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+        const liveValidation = this.liveValidate(
+          schema,
+          schemaUtils,
+          errorSchema,
+          newFormData,
+          extraErrors,
+          customErrors,
+          retrievedSchema,
+        );
+        state = { formData: newFormData, ...liveValidation, customErrors };
+      }
+      const hasChanges = Object.keys(state).some((key) => {
+        const oldData = _get(this.state, key);
+        const newData = _get(state, key);
+        return !deepEquals(oldData, newData);
+      });
+      if (hasChanges) {
+        this.setState(state as FormState<T, S, F>, () => {
+          if (onChange) {
+            onChange(toIChangeEvent({ ...this.state, ...state }), id);
+          }
+        });
+      }
+    }
   };
 
   /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it

packages/core/test/Form.test.jsx

@@ -2089,7 +2089,6 @@ describeRepeated('Form common', (createFormComponent) => {
       const formProps = {
         ref: createRef(),
         schema: { type: 'string' },
-        liveValidate: true,
       };
 
       it('should call submit handler with new formData prop value', async () => {
@@ -2184,7 +2183,6 @@ describeRepeated('Form common', (createFormComponent) => {
       const formProps = {
         ref: createRef(),
         schema: { type: 'string' },
-        liveValidate: true,
       };
       const { node, onChange } = createFormComponent(formProps);
 
@@ -2651,7 +2649,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('root level', () => {
+    describe('root level, live validation', () => {
       const formProps = {
         liveValidate: true,
         schema: {
@@ -2687,7 +2685,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('root level with multiple errors', () => {
+    describe('root level with multiple errors, live validation', () => {
       const formProps = {
         liveValidate: true,
         schema: {
@@ -2733,7 +2731,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('nested field level', () => {
+    describe('nested field level, live validation', () => {
       const schema = {
         type: 'object',
         properties: {
@@ -2785,7 +2783,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('array indices', () => {
+    describe('array indices, live validation', () => {
       const schema = {
         type: 'array',
         items: {
@@ -2837,7 +2835,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('nested array indices', () => {
+    describe('nested array indices, live validation', () => {
       const schema = {
         type: 'object',
         properties: {
@@ -2898,7 +2896,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('nested arrays', () => {
+    describe('nested arrays, live validation', () => {
       const schema = {
         type: 'object',
         properties: {
@@ -2976,7 +2974,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('array nested items', () => {
+    describe('array nested items, live validation', () => {
       const schema = {
         type: 'array',
         items: {
@@ -3025,7 +3023,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('schema dependencies', () => {
+    describe('schema dependencies, live validation', () => {
       const schema = {
         type: 'object',
         properties: {
@@ -3144,7 +3142,7 @@ describeRepeated('Form common', (createFormComponent) => {
       });
     });
 
-    describe('customValidate errors', () => {
+    describe('customValidate errors, live validation', () => {
       it('customValidate should raise an error when End is larger than Start field.', () => {
         let schema = {
           required: ['Start', 'End'],
@@ -3466,7 +3464,7 @@ describeRepeated('Form common', (createFormComponent) => {
     });
   });
 
-  describe('Custom format updates', () => {
+  describe('Custom format updates, live validation', () => {
     it('Should update custom formats when customFormats is changed', () => {
       const formProps = {
         ref: createRef(),

packages/docs/docs/api-reference/form-props.md

@@ -482,11 +482,27 @@ You can also create a custom generator by implementing the `NameGeneratorFunctio
 
 ## liveOmit
 
-If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called. Set to `false` by default.
+Flag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to
+to `true` and the form's data is updated by the user.
+
+If no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for
+the flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`
+is provided, then live omit will be performed when a field that was updated is blurred (as a performance
+optimization).
+
+> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release
 
 ## liveValidate
 
-If set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit.
+Flag that describes when live validation will be performed. Live validation means that the form will perform
+validation and show any validation errors whenever the form data is updated, rather than just on submit.
+
+If no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for
+the flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`
+is provided, then live validation will be performed when a field that was updated is blurred (as a performance
+optimization).
+
+> NOTE: The `boolean` options for this flag is deprecated and will be removed in a future major release
 
 ## method
 
@@ -504,6 +520,8 @@ If set to true, turns off HTML5 validation on the form. Set to `false` by defaul
 
 If set to true, turns off all validation. Set to `false` by default.
 
+> NOTE: In a future major release, this flag may be deleted replaced by making `validator` prop optional
+
 ## omitExtraData
 
 If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is called. Set to `false` by default.

packages/docs/docs/migration-guides/v6.x upgrade guide.md

@@ -961,6 +961,15 @@ Three new validator-based utility functions are available in `@rjsf/utils`:
   - This new optional flag was added to the `SchemaUtilsType` interface's version of `retrieveSchema()` as well.
 - `validationDataMerge()`: Added optional `preventDuplicates` boolean flag that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`
 
+### liveValidate and liveOmit performance improvement
+
+Because `liveValidate` and `liveOmit` can have serious performance impacts in the `Form`, those flags were updated to add the following new options:
+
+- 'onChange' - Live validate and live omit will happen as part of the `onChange` processing (the same as setting the flag to `true`)
+- 'onBlur' - Live validate and live omit will happen as part of the `onBlur` processing, saving the computations until the user is done inputting data. If any changes to the state occur due to this processing, the `onChange()` event will be sent back to the client with the new data.
+
+> NOTE: Due to this new feature, the old `boolean` options on those two flag has been deprecated. In a future major release, you will only be able to pass `onChange`, `onBlur` to activate the feature or `undefined` to disable it
+
 ### Optional Data Controls
 
 RJSF 6.x introduces a new feature that allows developers to provide a condensed UI for users who don't care to enter an optional list of array items or set of optional object fields.

packages/playground/src/components/Header.tsx

@@ -62,26 +62,26 @@ function HeaderButtons({ playGroundFormRef }: { playGroundFormRef: MutableRefObj
 const liveSettingsBooleanSchema: RJSFSchema = {
   type: 'object',
   properties: {
-    liveValidate: { type: 'boolean', title: 'Live validation' },
     disabled: { type: 'boolean', title: 'Disable whole form' },
     readonly: { type: 'boolean', title: 'Readonly whole form' },
     omitExtraData: { type: 'boolean', title: 'Omit extra data' },
-    liveOmit: { type: 'boolean', title: 'Live omit' },
     noValidate: { type: 'boolean', title: 'Disable validation' },
     noHtml5Validate: { type: 'boolean', title: 'Disable HTML 5 validation' },
     focusOnFirstError: { type: 'boolean', title: 'Focus on 1st Error' },
-    experimental_componentUpdateStrategy: {
-      type: 'string',
-      title: 'Component update strategy',
-      default: 'customDeep',
-      enum: ['customDeep', 'shallow', 'always'],
-    },
+    liveValidate: { type: 'string', title: 'Live validation', default: false, enum: [false, 'onChange', 'onBlur'] },
+    liveOmit: { type: 'string', title: 'Live omit', default: false, enum: [false, 'onChange', 'onBlur'] },
     showErrorList: {
       type: 'string',
       default: 'top',
       title: 'Show Error List',
       enum: [false, 'top', 'bottom'],
     },
+    experimental_componentUpdateStrategy: {
+      type: 'string',
+      title: 'Component update strategy',
+      default: 'customDeep',
+      enum: ['customDeep', 'shallow', 'always'],
+    },
   },
 };
 
@@ -221,6 +221,18 @@ const liveSettingsBooleanUiSchema: UiSchema = {
       inline: true,
     },
   },
+  liveValidate: {
+    'ui:widget': 'radio',
+    'ui:options': {
+      inline: true,
+    },
+  },
+  liveOmit: {
+    'ui:widget': 'radio',
+    'ui:options': {
+      inline: true,
+    },
+  },
 };
 
 const liveSettingsSelectUiSchema: UiSchema = {

packages/playground/src/components/Playground.tsx

@@ -110,6 +110,14 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
       setFormData(formData);
       setExtraErrors(extraErrors);
       setShowForm(true);
+      if (liveSettings?.liveValidate === true) {
+        // Convert v5 true value to `onChange`
+        liveSettings.liveValidate = 'onChange';
+      }
+      if (liveSettings?.liveOmit === true) {
+        // Convert v5 true value to `onChange`
+        liveSettings.liveOmit = 'onChange';
+      }
       setLiveSettings(liveSettings);
       if ('validator' in data && theValidator !== undefined) {
         setValidator(theValidator);

packages/playground/src/samples/simple.ts

@@ -50,7 +50,7 @@ const simple: Sample = {
       'ui:autocomplete': 'given-name',
       'ui:enableMarkdownInDescription': true,
       'ui:description':
-        'Make things **bold** or *italic*. Embed snippets of `code`. <small>And this is a small texts.</small> ',
+        'Make things **bold** or *italic*. Embed snippets of `code`. <small>NOTE: Unsafe HTML, not rendered</small> ',
     },
     age: {
       'ui:widget': 'updown',