FormData Does Not Update on Change for Dependent Properties
#3838 opened on Aug 22, 2023
Description
Prerequisites
- I have searched the existing issues
- I understand that providing a SSCCE example is tremendously useful to the maintainers.
- I have read the documentation
- Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.
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...
- Change the Domain Authority dropdown to "DA 50."
- 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.
- 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.