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_

Métricas do repositório

Stars: (13.175 stars)
Métricas de merge de PR: (Mesclagem média 3d 17h) (32 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa: Investigue como o formulário lida com a limpeza dos dados do formulário quando as dependências mudam, especialmente para campos de array onde as opções disponíveis mudam. O bug parece ser que, quando um usuário seleciona uma opção de um array e depois altera o campo dependente para um novo valor com opções diferentes, os valores selecionados anteriormente permanecem nos dados do formulário em vez de serem limpos. Analise a lógica de resolução de dependências no react jsonschema form e entenda quando e por que os dados do formulário não estão sendo atualizados adequadamente. Considere testar com exemplos mínimos de JSON Schema.
Pilha de tecnologia: typescriptjavascriptreact
Domain: frontend
Tipo Issue: Bug
Difficulty: 3
Tempo estimado: 1-3 horas
Status da atividade: Ativo
Clarity: Claro
Prerequisites: ReactJSON Schema
Simpatia para novatos: 65