Repository: mozilla-services/react-jsonschema-form
Pull request #1332 (2019-06-23 22:01:56)

[WIP] Live omit
### Reasons for making this change

Add a `liveOmit` option. I have a use case in which I want omitExtraData to happen during onChange, but I do not want liveValidate.

### Checklist

* [ ] **I'm updating documentation**
  - [ ] I've [checked the rendering](https://react-jsonschema-form.readthedocs.io/en/latest/#contributing) of the Markdown text I've added
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated [docs](https://react-jsonschema-form.readthedocs.io/) if needed
* [ ] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature


epicfaace: @CodeGains it turned out I had to include this for my use case -- if we end up having a `liveOmit` property, do you think it's still necessary to automatically live omit when `liveValidate` is true? Or would that end up complicating things and might it be better just to only live omit when `liveOmit` is true (regardless of the value of `liveValidate`)?
CodeGains: @epicfaace I think it makes sense to only live omit when `liveOmit` is set so we don't force the live omit functionality on a user that just wants to `liveValidate`.
epicfaace: Thanks -- good point, will do that.

Patch:
diff --git a/docs/index.md b/docs/index.md
index 141d4eaca..b9b45e0f7 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -118,7 +118,7 @@ render((
 ), document.getElementById("app"));
 ```
 
-> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, then set the `omitExtraData` prop to `true`.
+> Note: If there are fields in the `formData` that are not represented in the schema, they will be retained by default. If you would like to remove those extra values on form submission, then set the `omitExtraData` prop to `true`. Set the `liveOmit` prop to true in order to remove extra data upon form data change.
 
 #### Form error event handler
 
@@ -137,7 +137,7 @@ render((
 
 If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.
 
-> Note: If `omitExtraData` and `liveValidate` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called.
+> Note: 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.
 
 #### Form field blur events
 
diff --git a/src/components/Form.js b/src/components/Form.js
index 7d5d7d6d7..84bdea64e 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -175,7 +175,7 @@ export default class Form extends Component {
     let state = { formData };
     let newFormData = formData;
 
-    if (this.props.omitExtraData === true && this.props.liveValidate) {
+    if (this.props.omitExtraData === true && this.props.liveOmit === true) {
       const newState = this.getStateFromProps(this.props, formData);
 
       const fieldNames = this.getFieldNames(
@@ -184,6 +184,9 @@ export default class Form extends Component {
       );
 
       newFormData = this.getUsedFormData(formData, fieldNames);
+      state = {
+        formData: newFormData,
+      };
     }
 
     if (mustValidate) {


Test patch:
diff --git a/test/Form_test.js b/test/Form_test.js
index 6cf309c2b..db23e8003 100644
--- a/test/Form_test.js
+++ b/test/Form_test.js
@@ -1110,7 +1110,7 @@ describe("Form", () => {
       });
     });
 
-    it("should call getUsedFormData when the omitExtraData prop is true and liveValidate is true", () => {
+    it("should call getUsedFormData when the omitExtraData prop is true and liveOmit is true", () => {
       const schema = {
         type: "object",
         properties: {
@@ -1124,13 +1124,13 @@ describe("Form", () => {
       };
       const onChange = sandbox.spy();
       const omitExtraData = true;
-      const liveValidate = true;
+      const liveOmit = true;
       const { node, comp } = createFormComponent({
         schema,
         formData,
         onChange,
         omitExtraData,
-        liveValidate,
+        liveOmit,
       });
 
       sandbox.stub(comp, "getUsedFormData").returns({