React-jsonschema-form: Schema dependencies conditional. formdata is not deleted if dependent field data is deleted

Created on 7 Nov 2017  Â·  6Comments  Â·  Source: rjsf-team/react-jsonschema-form

Prerequisites

  • [x] I have read the documentation;
  • [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

Schema dependencies conditional. formdata is not deleted if dependent field data is deleted

Steps to Reproduce

Take example of sample json provided in documentation

{
  "type": "object",

  "properties": {
    "name": { "type": "string" },
    "credit_card": { "type": "number" }
  },

  "required": ["name"],

  "dependencies": {
    "credit_card": {
      "properties": {
        "billing_address": { "type": "string" }
      },
      "required": ["billing_address"]
    }
  }
}
````
#### Expected behavior


Lets say you enter following data:
1) Name :"abc"
2) credit_card: 123

At this point,  billing_address field is visible (which is expected).  Now enter some value in billing address field: example abc

The formData is . 

{
"name": "abc",
"credit_card": 123,
"billing_address": "abc"
}

Now delete value is credit_card field. billing_address field disappears (expected)


[What you expected to happen]
The formData should be 

{
"name": "Joe",
}

#### Actual behavior

However it is 

{
"name": "Joe",
"billing_address": "abc"
}
```

Version

1.0.0

Most helpful comment

There are use cases where it is also useful to have the data stored. Let's say if a user changes a form value by a mistake, it could lead user losing data from the form. I think this is something that should be addressed in the submission phase instead of in the internal data storage. Maybe the behaviour could be configurable?

All 6 comments

There are use cases where it is also useful to have the data stored. Let's say if a user changes a form value by a mistake, it could lead user losing data from the form. I think this is something that should be addressed in the submission phase instead of in the internal data storage. Maybe the behaviour could be configurable?

I agree with @lauriii
I am considering whether the validation of not-dependent fields can be ignored when submission, instead of modifying user data.
The current situation is definitely a bug that user cannot submit the form since there're errors in not-dependent fields.

Did anyone find a workaround for this issue when using schema dependencies? Is there a way to determine which form fields are visible during the time of submission in the onSubmit handler, so that we can filter out formData for fields that are not visible. Currently I don't see any way of customizing that behavior to not have all formData (whether visible or not) submitted.

In general, rjsf tries not to meddle with fields it doesn't "own", and as the "dependencies" functionality just adds/subtracts fields on the fly to the schema, rjsf stops "owning" the field as soon as the dependency is no longer active. I don't see any obvious fixes at the rjsf level, since there's no obvious distinction between state that has fields that it doesn't own now but could own later (which we could potentially drop), vs. state that has fields that will never be owned (and thus we should leave alone). You could try using retrieveSchema from utils.js -- that should resolve references and dependencies.

So we have a working solution for only returning the data actually used in the form. Will post a PR soon for consideration. As stated above there is no super straight fwd solution, but I think I found a pretty reasonable and not too intrusive solution.

The idea is....

• Add a name attribute to all of the fields that is the json path to the form data, e.g. foo.bar.1.name (something that IMO should be there regardless of this solution).

• onSubmit we can get all of the form elements and make a list of name attributes (the paths).

• use lodash _.pick(formData, [ARRAY_OF_FIELD_NAMES]) to get only the used data and return that as the formData.

We do this if they set the omitUnusedData prop to true otherwise it defaults to false and works as is.

Just updating docs and writing tests, then we will submit a PR.

The omitExtraData prop was added in #1283; with omitExtraData and liveOmit, you should be able to do this, so I'm closing this issue.

That being said, you might be interested in the discussion at #1148. I'd appreciate to hear what you think.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anttivikman picture anttivikman  Â·  3Comments

norim13 picture norim13  Â·  3Comments

jabaren picture jabaren  Â·  3Comments

marinav picture marinav  Â·  3Comments

Eric24 picture Eric24  Â·  3Comments