Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MUI radio widget initializes as uncontrolled when schema has no default value #3511

Closed
4 tasks done
tyrdavis opened this issue Mar 16, 2023 · 2 comments · Fixed by #3532
Closed
4 tasks done

MUI radio widget initializes as uncontrolled when schema has no default value #3511

tyrdavis opened this issue Mar 16, 2023 · 2 comments · Fixed by #3532

Comments

@tyrdavis
Copy link

Prerequisites

What theme are you using?

mui

Version

5.1.0

Current Behavior

When using the MUI theme, a field using RadioWidget with no default value renders as uncontrolled. In a non-production app, there is a MUI warning logged to the console, which unfortunately can't be seen in the playground. The widget being uncontrolled causes some strange behaviors, such as it no longer responding to programmatic changes to its value.

Playground link with the issue

In the above playground, if you select one of the radio options, then attempt to use the programmatic reset button, the field does not reset its value due to it being uncontrolled. Compare to this playground link using the default theme and this playground link using MUI but with a default defined to see the widget working as expected.

Expected Behavior

MUI's RadioGroup should always be controlled when instantiated by RJSF to prevent unexpected behavior.

Steps To Reproduce

  1. Use a schema with a MUI 5 RadioWidget and no default defined
  2. Select a value in the form
  3. Attempt to programmatically change the value of the field; this will fail

Environment

- OS:Ubuntu 22.04
- Node: 16.13.0
- npm: 8.1.0

Anything else?

No response

@tyrdavis tyrdavis added bug needs triage Initial label given, to be assigned correct labels and assigned labels Mar 16, 2023
@tyrdavis
Copy link
Author

tyrdavis commented Mar 16, 2023

I believe the solution to this is to use null as the RadioGroup's value when enumOptionsIndexForValue returns undefined here. RadioGroup sets itself up as uncontrolled only when value={undefined} on its initial mount, so I believe that should satisfy keeping the component's value empty while still being controlled.

@heath-freenome
Copy link
Member

@tyrdavis I tried your example and the same behavior occurs for chakra-ui, material-ui 4 and material-ui 5 (it works fine for all the other themes). Would you be willing to update those three themes with your fix and push a PR?

@heath-freenome heath-freenome added help wanted and removed needs triage Initial label given, to be assigned correct labels and assigned labels Mar 16, 2023
sravimohan added a commit to sravimohan/react-jsonschema-form that referenced this issue Mar 21, 2023
sravimohan added a commit to sravimohan/react-jsonschema-form that referenced this issue Mar 21, 2023
heath-freenome added a commit that referenced this issue Mar 22, 2023
…default value #3511 (#3532)

* fix : default value for radio button group #3511

* updated changelog

* Update CHANGELOG.md

---------

Co-authored-by: Heath C <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants