fix(libs/form-builder): add capacity to change the default behavior 'onChange'

README.md

@@ -108,6 +108,10 @@ Run `yarn nx dep-graph` to see a diagram of the dependencies of your projects.
 
 Visit the [Nx Documentation](https://nx.dev) to learn more.
 
+## Release or Pre-release a new version
+
+Use the actions tabs in github!
+
 ## Contributors
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.

libs/form-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrockstreaming/form-builder",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "dependencies": {
     "react-hook-form": "7.27.0"
   },

libs/form-builder/src/lib/__tests__/formBuilder.spec.js

@@ -1,5 +1,7 @@
 /* eslint-disable */
+import '@testing-library/jest-dom';
 import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
 import { FormBuilder } from '../formBuilder';
 
 const makeStep = ({ fieldsById, stepId, label }) => ({
@@ -60,12 +62,18 @@ describe('<FormBuilder />', () => {
     steps: { ...stepOne, ...stepTwo },
     stepsById: [stepOneId, stepTwoId],
   };
+
   // aria-checked="true"
   const CORRECT_DICTIONARY = {
-    text: ({ label, ...props }) => (
+    text: ({ label, errors, id, ...props }) => (
       <fieldset>
-        <label>{label}</label>
-        <input type="text" placeholder="Test" />
+        <label for={id}>{label}</label>
+        <input id={id} type="text" placeholder="Test" />
+        {
+          !!errors ? (
+            <span>{errors.message}</span>
+          ) : null
+        }
       </fieldset>
     ),
     checkbox: ({ label, value = false, ...props }) => (
@@ -77,6 +85,53 @@ describe('<FormBuilder />', () => {
     submit: ({ label }) => <button type="submit">{label}</button>,
   };
 
+  describe('onChangeTriggerByField behavior', () => {
+    it.only('should trigger validate only changed field', async () => {
+      await getWrapper({
+        schema: {
+          fields: {
+            [fieldOneId]: {
+              id: fieldOneId,
+              type: 'text',
+              meta: {
+                label: 'bar',
+              },
+              validation: {
+                required: {
+                  key: 'required',
+                  message: 'field is required',
+                  value: true,
+                },
+              }
+            },
+            [fieldTwoId]: {
+              id: fieldTwoId,
+              type: 'text',
+              meta: {
+                label: 'foo',
+              },
+              validation: {
+                required: {
+                  key: 'required',
+                  message: 'field is required',
+                  value: true,
+                },
+              }
+            },
+          },
+          steps: { ...stepOne },
+          stepsById: [stepOneId, stepTwoId],
+        },
+        dictionary: CORRECT_DICTIONARY,
+        onSubmit,
+      });
+
+      await userEvent.type(screen.getByLabelText('bar'), 'tesTyping');
+
+      expect(screen.queryByText('field is required')).not.toBeInTheDocument();
+    })
+  })
+
   describe('with bad props', () => {
     it('should not render if we pass no dictionary', async () => {
       await getWrapper({

libs/form-builder/src/lib/components/formField.component.tsx

@@ -13,7 +13,8 @@ export interface FormFieldProps {
   propRef?: Ref;
   disabled?: boolean;
   label?: string;
-  onClick?: (event: any) => void;
+  onClick?: (event: React.BaseSyntheticEvent) => void;
+  onChange?: (event: React.BaseSyntheticEvent) => void;
   isValidating?: boolean;
   formId?: string;
   shouldDisplayRequiredHint?: boolean;

libs/form-builder/src/lib/formBuilder.tsx

@@ -35,7 +35,7 @@ export interface FormBuilderProps {
   onSubmit: SubmitHandler<FieldValues>;
   onNextStep?: (value: UnpackNestedValue<FieldValues>) => void;
   defaultValues?: DefaultValues<FieldValues>;
-  behavior?: keyof ValidationMode;
+  behavior?: keyof ValidationMode | 'onChangeTriggerByField';
   extraValidation?: ExtraValidation;
   isLastStep?: boolean;
   currentStepIndex?: number;
@@ -66,7 +66,7 @@ export function FormBuilder({
     trigger,
     setFocus,
   } = useForm<FieldValues>({
-    mode: behavior,
+    mode: behavior === 'onChangeTriggerByField' ? 'onSubmit' : behavior,
     criteriaMode: 'all',
     defaultValues,
   });
@@ -149,7 +149,8 @@ export function FormBuilder({
                     defaultValue={defaultValue}
                     rules={validationRulesById[fieldId]}
                     render={({ field }) => {
-                      const { ref, ...fieldRest } = field;
+                      const { ref, onChange, ...fieldRest } = field;
+
                       return (
                         <FormField
                           id={id}
@@ -164,6 +165,12 @@ export function FormBuilder({
                           {...formMeta}
                           {...meta}
                           {...fieldRest}
+                          onChange={(event) => {
+                            onChange(event);
+                            if (behavior === 'onChangeTriggerByField') {
+                              trigger(id);
+                            }
+                          }}
                         />
                       );
                     }}

libs/form-context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrockstreaming/form-context",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "peerDependencies": {
     "react": "17.0.2 || ^18.0.0",
     "@bedrockstreaming/form-builder": "0.8.1",

libs/form-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrockstreaming/form-editor",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "dependencies": {
     "@bedrockstreaming/form-builder": "0.8.1",
     "@bedrockstreaming/form-redux": "0.8.1",

libs/form-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrockstreaming/form-redux",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "peerDependencies": {
     "@bedrockstreaming/form-builder": "0.8.1",
     "@hookform/devtools": "^4.0.2",

libs/form-validation-rule-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrockstreaming/form-validation-rule-list",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "dependencies": {},
   "peerDependencies": {
     "react": "17.0.2 || ^18.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "forms",
-  "version": "0.9.2",
+  "version": "0.9.3-fix-toomuch-calls.2",
   "license": "MIT",
   "keywords": [
     "react-hook-form",
@@ -99,6 +99,8 @@
     "@nx-plus/docusaurus": "12.2.0",
     "@testing-library/react": "11.2.6",
     "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "14.5.2",
+    "@testing-library/jest-dom": "6.4.6",
     "@types/debug": "4.1.7",
     "@types/deep-freeze": "0.1.2",
     "@types/jest": "26.0.24",