rjsf-team/react-jsonschema-form

FormData Does Not Update on Change for Dependent Properties

Open

#3838 opened on Aug 22, 2023

View on GitHub
 (12 comments) (2 reactions) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import
bughelp wanted

Description

Prerequisites

What theme are you using?

material-ui

Version

5.12.0

Current Behavior

I am struggling with a bug that seems inherent to the use of conditional logic to render different enum options for one property based on the value of a different property. In my current setup, essentially, property 1 = value 1 allows property 2 to have enum 1 or enum 2 while property 1 = value 2 only allows property 2 to have enum 2 . My default values are property 1 = value 1 and property 2 = enum 1.

The problem that I'm running into is that changing property 1's value to value 2 does not update property 2's value to enum 2 in the resulting formData (the form renders appropriately - it just doesn't match it's formData) and subsequently the field for property 2 acts basically as a read only field (i.e. selecting enum 2 - the only choice - from that dropdown doesn't update the formData value either).

I have created the schema using both if...then syntax and dependencies - both methods run into this same formData bug.

As this is an important feature for our company, if there is some way for us to sponsor this issue we would be happy to pay $250 to the developer responsible for its resolution.

Expected Behavior

When updating property 1's value (da) to enum 2 (DA 50) in the form, the field for property 2 (t) should update its corresponding formData value to the only available enum 2.

Steps To Reproduce

In this playground...

  1. Change the Domain Authority dropdown to "DA 50."
  2. Note that the Traffic dropdown now only shows one enum option ("Traffic 5,000") but the corresponding "Product\PackageDefinitions\LinkOutreach\DomainAuthorityAndTraffic::t" value in formData is still 1000.
  3. Also note that selecting "Traffic 5,000" from the Traffic dropdown does not update the formData either.

Environment

- OS: macOS Ventura 13.4.1 (c)
- Node: 20.4.0
- npm: 9.7.2

Anything else?

In this playground you can find an equivalent schema using "dependencies" rather than "if...then" syntax. It presents the same behavior - formData does not update for property 2 when property 1's value changes.

Contributor guide