react-jsonschema-form
react-jsonschema-form copied to clipboard
Nested dependency doesn't update
Prerequisites
- [X] I have read the documentation
What theme are you using?
core
What is your question?
I have a react JSON schema like this
{ "type": "object", "properties": { "platform": { "title": "", "$ref": "#/definitions/platform" } }, "definitions": { "username": { "type": "string", "title": "Enter Username" }, "url": { "type": "string", "title": "Enter url" }, "lineId": { "type": "string", "title": "Enter LineID" }, "platform": { "type": "object", "properties": { "platform": { "type": "string", "title": "Select Platform", "enum": [ "--select--", "Facebook", "Instagram", "Line" ], "default": "--select--" } }, "dependencies": { "action": { "oneOf": [ { "properties": { "action": { "const": "Follow" }, "username": { "$ref": "#/definitions/username" } } }, { "properties": { "action": { "const": "Share" }, "url": { "$ref": "#/definitions/url" } } }, { "properties": { "action": { "const": "Add" }, "lineId": { "$ref": "#/definitions/lineId" } } } ] }, "platform": { "oneOf": [ { "properties": { "platform": { "enum": [ "Facebook" ] }, "action": { "type": "string", "title": "Select Action", "enum": [ "Follow", "Share" ], "enumNames": [ "Follow", "Share" ] } } }, { "properties": { "platform": { "enum": [ "Instagram" ] }, "action": { "type": "string", "title": "Select Action", "enum": [ "Follow" ], "enumNames": [ "Follow" ] } } }, { "properties": { "platform": { "enum": [ "Line" ] }, "action": { "type": "string", "title": "Select Action", "enum": [ "Add" ], "enumNames": [ "Add" ] } } } ] } } } } }
on selecting platform an action field is rendered and based on the action field i am rendering different text fields. After Selecting a platform and action the third text field is displayed, However when i change the platform again the text field is still rendered on the screen .
Is it possible to hide the third field when i re select the platform ?
Here is a link to the playground with your example. I'm noticing that when you select a different platform, the action data remains, which is why the input field shows up. In the case of changing from Facebook with Follow as a choice to Instagram with Follow as a choice this looks and works fine. But if the value of action is not consistent with the new choice the value remains. One possible work-around to this is to provide an onChange that detects the when the platform changes and removes the action in the formData that is passed back into the Form. There is probably a new feature that needs to be built to handle what to do with formData for this use case.
yes the action field remains.Even though action field is being changed in the ui i.e dropdown , the formdata retains the old action value. Any idea how this can be resolved?
@Bhirahaspathi-Sairam See my updated comment above
@heath-freenome is this issue will be resolved in the future ?
I just hit the same problem. Basically, if the value of the conditional field is changed, every field that was rendered based on that property should be reset, before the condition is evaluated (based on the new selected option).
Is this statement correct? If so, is it something that could be considered as a feature?
I understand that with onChange everything can be manipulated, but this requires hardcoding of field names and custom JS code that pretty much defies the purpose of this library.
Hello, just to bounce this issue, as it is still unanswered.
@magaton Yes, this is a new feature request. Thanks for following up. We'd love help building it.