Properties whose available options change via dependency creates an unresolvable state for users · rjsf-team/react-jsonschema-form#4465

2025-01-23T14:56:14.000Z

### Prerequisites - [x] I have searched the existing issues - [x] I understand that providing a [SSCCE](http://sscce.org/) example is tremendously useful to the maintainers. - [x] I have read the [documentation](https://rjsf-team.github.io/react-jsonschema-form/docs) - [x] Ideally, I'm providing a [sample JSFiddle](https://jsfiddle.net), [Codesandbox.io](https://codesandbox.io) or preferably a [shared playground link](https://rjsf-team.github.io/react-jsonschema-form/) demonstrating the issue. ### What theme are you using? core ### Version 5.24.1 ### Current Behavior When I create a property dependency and the dependent property is an array with multiple options whose options change based on the dependency, if I start to select options, then switch the dependent field, the formdata does not clear the invalid options. ### Expected Behavior Invalid array options are cleared when the available list of options changes ### Steps To Reproduce [Playground Sandbox Link](https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJwcm9kdWN0X3R5cGUiOiJmcnVpdCIsInByb2R1Y3RzIjpbXX0sInNjaGVtYSI6eyJ0aXRsZSI6IkEgcmVnaXN0cmF0aW9uIGZvcm0iLCJkZXNjcmlwdGlvbiI6IkEgc2ltcGxlIGZvcm0gZXhhbXBsZS4iLCJ0eXBlIjoib2JqZWN0IiwicHJvcGVydGllcyI6eyJwcm9kdWN0X3R5cGUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiUHJvZHVjdCBUeXBlIiwiZW51bSI6WyJmcnVpdCIsImRhaXJ5Il0sImRlZmF1bHQiOiJmcnVpdCJ9LCJwcm9kdWN0cyI6eyJ0eXBlIjoiYXJyYXkiLCJ0aXRsZSI6IlByb2R1Y3RzIiwibWluSXRlbXMiOjEsInVuaXF1ZUl0ZW1zIjp0cnVlLCJpdGVtcyI6eyJhbnlPZiI6W119fX0sImRlcGVuZGVuY2llcyI6eyJwcm9kdWN0X3R5cGUiOnsib25lT2YiOlt7InJlcXVpcmVkIjpbInByb2R1Y3RfdHlwZSJdLCJwcm9wZXJ0aWVzIjp7InByb2R1Y3RfdHlwZSI6eyJlbnVtIjpbImZydWl0Il19LCJwcm9kdWN0cyI6eyJ0eXBlIjoiYXJyYXkiLCJ1bmlxdWVJdGVtcyI6dHJ1ZSwiaXRlbXMiOnsiYW55T2YiOlt7InR5cGUiOiJzdHJpbmciLCJlbnVtIjpbImFwcGxlIl19LHsidHlwZSI6InN0cmluZyIsImVudW0iOlsiYmFuYW5hIl19XX19fX0seyJwcm9wZXJ0aWVzIjp7InByb2R1Y3RfdHlwZSI6eyJlbnVtIjpbImRhaXJ5Il19LCJwcm9kdWN0cyI6eyJ0eXBlIjoiYXJyYXkiLCJ1bmlxdWVJdGVtcyI6dHJ1ZSwiaXRlbXMiOnsiYW55T2YiOlt7InR5cGUiOiJzdHJpbmciLCJlbnVtIjpbIm1pbGsiXX0seyJ0eXBlIjoic3RyaW5nIiwiZW51bSI6WyJjaGVlc2UiXX1dfX19fV19fX0sInVpU2NoZW1hIjp7InByb2R1Y3RfdHlwZSI6eyJ1aTp3aWRnZXQiOiJyYWRpbyJ9LCJwcm9kdWN0cyI6eyJ1aTp3aWRnZXQiOiJjaGVja2JveGVzIn19LCJ0aGVtZSI6ImRlZmF1bHQiLCJsaXZlU2V0dGluZ3MiOnsic2hvd0Vycm9yTGlzdCI6InRvcCIsInZhbGlkYXRlIjpmYWxzZSwiZGlzYWJsZWQiOmZhbHNlLCJub0h0bWw1VmFsaWRhdGUiOmZhbHNlLCJyZWFkb25seSI6ZmFsc2UsIm9taXRFeHRyYURhdGEiOmZhbHNlLCJsaXZlT21pdCI6ZmFsc2UsImV4cGVyaW1lbnRhbF9kZWZhdWx0Rm9ybVN0YXRlQmVoYXZpb3IiOnsiYXJyYXlNaW5JdGVtcyI6InBvcHVsYXRlIiwiYWxsT2YiOiJza2lwRGVmYXVsdHMiLCJjb25zdEFzRGVmYXVsdHMiOiJhbHdheXMiLCJlbXB0eU9iamVjdEZpZWxkcyI6InBvcHVsYXRlQWxsRGVmYXVsdHMiLCJtZXJnZURlZmF1bHRzSW50b0Zvcm1EYXRhIjoidXNlRm9ybURhdGFJZlByZXNlbnQifX0sInZhbGlkYXRvciI6IkFKVjgifQ==) 1. Create a property with a selectable option, say product type {'fruit', 'dairy'} 2. Create a dependent property that is an array whose options change, 'fruit' -> 'apple', 'banana' and 'dairy' -> 'milk', 'cheese' 3. Selecting 'apple' then switching to 'dairy' leaves a user in an uncorrectable state because 'apple' stays in the form data See the video of me demonstrating it with the Playground Sandbox https://github.com/user-attachments/assets/7a9ccbc3-ef25-4a97-a23d-b6c9fe10a1f5 ### Environment ```markdown - OS: - Node: - npm: ``` ### Anything else? _No response_

(4 comments) (1 reaction) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import

featurehelp wanted

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?

core

Version

5.24.1

Current Behavior

When I create a property dependency and the dependent property is an array with multiple options whose options change based on the dependency, if I start to select options, then switch the dependent field, the formdata does not clear the invalid options.

Expected Behavior

Invalid array options are cleared when the available list of options changes

Steps To Reproduce

Playground Sandbox Link

Create a property with a selectable option, say product type {'fruit', 'dairy'}
Create a dependent property that is an array whose options change, 'fruit' -> 'apple', 'banana' and 'dairy' -> 'milk', 'cheese'
Selecting 'apple' then switching to 'dairy' leaves a user in an uncorrectable state because 'apple' stays in the form data

See the video of me demonstrating it with the Playground Sandbox

https://github.com/user-attachments/assets/7a9ccbc3-ef25-4a97-a23d-b6c9fe10a1f5

Environment

- OS:
- Node:
- npm:

Anything else?

No response

Contributor guide

Tech stack: typescriptreact
Domain: frontend
Issue type: bug
Difficulty: 3
Estimated time: 1-3 hours
Activity status: active
Clarity: clear
Prerequisites: ReactJSON Schemareact jsonschema form basics
Newbie friendliness: 65
Research direction: Investigate how the form state is updated when a property dependency triggers a change in available options. Look at the logic that handles clearing or preserving form data when the dependent field changes. The issue is reproducible via the playground link. Consider examining the source code for the 'dependencies' handling, possibly in components such as Form or SchemaField. Pay attention to how array fields with uniqueItems are managed.