Selector not working inside dependency for uncontrolled components

[snirp]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

The select input inside a schema dependency is not working as intended. The default value is ignored and it is not possible to select a single choice. When there are multiple choices, the workaround is to first change the value and then back to the initial.

Steps to Reproduce

This is best viewed in the provided sample: https://codesandbox.io/s/github/snirp/schemadebug

• Form A: inside "select2" the value of "option2A" is displayed, but this value is not actually selected. Only "select1" is actually submitted and no validation errors are triggered (although "select2" is a required field. Toggling between "option2A" and "option2B" can be used as a workaround.

• Form B: the same issue, but the workaround is not available, since there are no choices to toggle between. This is a particularly nasty situation we encountered.

• Form C: the defaults are provided through formData. This is the workaround we are using.

Expected behavior

Should work just as select input outside the dependency

Actual behavior

See the provided codesandbox

Version

^1.7.0

[epicfaace]

How are you determining that "option2A" is not selected? For me, it seems like it is both showing up and part of the form data.

[snirp]

There are two ways to observe that "option2A" is not selected.

1. When you submit the form, the formData is logged as:

{ select1: "option1A" }

2. The schema dependency, containing "val2A", is not showing. Observe that toggling between "option2B" and "option2A" changes this, but there is not way to do so in Form B

[snirp]

@epicfaace - does this answer your question and should this issue be tagged as a bug?

[epicfaace]

@snirp thanks for the explanation, makes sense. When I go to this playground link it is working fine, but that is because Form in the playground is a controlled component (with formData and onChange props passed in). So it seems like this issue only happens for uncontrolled components.

[epicfaace]

#1371 fixed a similar issue, but it must not have caught everything.

[snirp]

The playground seems to handle it fine. I tried to make it a controlled form myself by using the state as the formData and updating state from onChange, but that makes no difference. How does the playground do it?

edit: it does work as a controlled form: https://codesandbox.io/s/schemadebug-uqfq6

[epicfaace]

The playground seems to handle it fine. I tried to make it a controlled form myself by using the state as the formData and updating state from onChange, but that makes no difference. How does the playground do it?

edit: it does work as a controlled form: https://codesandbox.io/s/schemadebug-uqfq6

Yeah, the form on the playground is already a controlled form.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.