cybertec-postgresql / rjsf-material-ui

[Archived] Material UI theme for react-jsonschema-form.
https://cybertec-postgresql.github.io/rjsf-material-ui/
MIT License
62 stars 25 forks source link

RangeWidget / Material-UI Slider throws continuous Exception if no default value given #128

Open lgersman opened 4 years ago

lgersman commented 4 years ago

Hi guys, you did a great job !

I have just one tiny issue - when using the range widget ("ui:widget": "range") and the schema defines no default value the Material-UI Slider throws continuous Exceptions :

Material-UI: A component is changing an uncontrolled Slider to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Slider element for the lifetime of the component.
More info: https://fb.me/react-controlled-components
    in Slider (created by WithStyles)
    in WithStyles (created by RangeWidget)
    in RangeWidget (created by Anonymous)
...

since the control cannot bind to state.value

This can easily be fixed by providing 0 as default value to the value Parameter in

https://github.com/cybertec-postgresql/rjsf-material-ui/blob/0c7aa6e25bc4014d27c0f84852665a5846fb2f47/src/RangeWidget/RangeWidget.tsx#L12

like this :

const RangeWidget = ({
  value = 0,
  readonly,
  disabled,
...

Hope this helps you guys a bit.

One more suggestion : It would be nice to add some additional classes to the FormLabel of the RangeWidget to make styling easier. For me the most confortable tweak right now is to use

<FormLabel
    id={id}
    className="MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
        >
   {label}
</FormLabel>

which lets it look like the text input label.

But it would make more sense not to apply the InputLabel classes for but slider namespaced css classes. Its just a suggestion..

Happy coding,

Lars