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 SelectWidget: controlled/uncontrolled #3844

Closed
4 tasks done
Intendanto opened this issue Aug 29, 2023 · 4 comments · Fixed by #3870
Closed
4 tasks done

Mui SelectWidget: controlled/uncontrolled #3844

Intendanto opened this issue Aug 29, 2023 · 4 comments · Fixed by #3870
Labels
bug help wanted material-ui material-ui related theme issue

Comments

@Intendanto
Copy link
Contributor

Intendanto commented Aug 29, 2023

Prerequisites

What theme are you using?

mui

Version

5.11.1

Current Behavior

In general, codeandbox detects 2 errors:

  1. List of options in the user interface is not updated when the schema state is updated;
  2. If initialFormData contains a oneOf list, that does not include the value from InitialFormData, this breaks that particular field, preventing any non-manual updates to it;

Expected Behavior

  1. Expect options list to update when schema changes;
  2. Expect Select component to be prefilled with option with corresponding value from options list;

Steps To Reproduce

sandbox

Environment

OS: Ubuntu 22.*
Node: 18.15.0
yarn: 1.22.19

Anything else?

I didn't succeed in tracking why first bug occurs (locally it disappeared for me at some point for some reason, but still relevant in attached sandbox) so I will elaborate on second one.

In SelectWidget file if enumOptionsIndexForValue didnt find current value in options list - it returns undefined and passes it into mui Select . Mui, in its turn, uses useControlled hook to choose if component should be controlled externally or internally. As undefined is passed as value, this field starts using internal state and, due to realization of useControlled, it doesnt accept external value, stucks in that position and spams warnings in console.

Possible solution is to pass emptyValue if selectedIndexes is undefined here.
E.g.:

      value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}

Please, review the issue, and if it is - if I should create PR

Btw, thanks for great libs :)

@Intendanto Intendanto added bug needs triage Initial label given, to be assigned correct labels and assigned labels Aug 29, 2023
@heath-freenome
Copy link
Member

@Intendanto This fix looks like a reasonable approach. Would you be willing to make a PR to fix this in both the @rjsf/mui and @rjsf/material-ui since the code is the same in both?

Also I think there a React issue in your sandbox, because if I push the Add Options button and select a, b, or c then the d choice shows up in the list.

@heath-freenome heath-freenome added help wanted material-ui material-ui related theme issue and removed needs triage Initial label given, to be assigned correct labels and assigned labels Sep 8, 2023
@Intendanto
Copy link
Contributor Author

@heath-freenome
React issue was pretty obvious - js nested objects deep links. Object.assing recreates only lvl 1 object, so using deep @ramda/clone on schema fixed it. Sandbox updated.

Yes, will create PR. I see I dont have rights to push the branch now.

@heath-freenome
Copy link
Member

@Intendanto you will need to fork the repo and do the change on your fork, then return to PR tab and you should be able to create a PR against this repo using your fork's branch

@Intendanto
Copy link
Contributor Author

@heath-freenome
Ty, didnt know that
Created PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug help wanted material-ui material-ui related theme issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants