rjsf-team/react-jsonschema-form

Nested if/then/else not initializing correctly

Open

#3872 opened on Sep 19, 2023

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import
dependencieshelp wantedif-then-else

Description

Prerequisites

What theme are you using?

core

Version

5.x

Current Behavior

Nested if/then behavior isn't initializing correctly

Example playground

The initial render has "animal" as blank and the dependent fields don't show up until Cat or Fish is selected. Once you select "Cat", the dependent field "food" shows up, but also "kind" and "favorite" show up, even though I don't expect them to. Once you select something from the food dropdown, the correct field disappears and the behavior is again as expected, until you select the empty option from the "food" dropdown.

Expected Behavior

Nested "then" properties would only show up once the "if" condition is met.

Steps To Reproduce

  1. Example playground
  2. Select "Cat"
  3. Notice "kind" and "favorite" both appear, even though they should only appear based on the selection of the "food" dropdown

Environment

- OS:
- Node:
- npm:

Anything else?

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic ReactJavaScriptJSON Schema
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the form state initialization logic in the library, specifically how nested 'if/then/else' schemas are handled. Look at the 'react jsonschema form' source code, likely in files handling 'Form', 'SchemaField', or 'utils'. The issue shows that nested 'then' fields appear prematurely. Focus on the initial rendering of conditional schemas and how state dependencies are resolved. Review the playground link for schema and form data. Check existing tests for similar cases.